From 56d765d1b9bc3d5cf18367e6fd2dd7b61b0a89aa Mon Sep 17 00:00:00 2001 From: Muhammad Farhan Khan Date: Thu, 5 Sep 2024 11:43:20 +0500 Subject: [PATCH] feat!: Dropping Sass support from builtin blocks, replacing with vanilla CSS --- scripts/compile_sass.py | 52 - xmodule/annotatable_block.py | 6 +- xmodule/assets/AnnotatableBlockDisplay.css | 197 +++ xmodule/assets/AnnotatableBlockDisplay.scss | 3 - xmodule/assets/AnnotatableBlockEditor.css | 5 + xmodule/assets/AnnotatableBlockEditor.scss | 3 - xmodule/assets/CustomTagBlockEditor.css | 5 + xmodule/assets/CustomTagBlockEditor.scss | 3 - xmodule/assets/HtmlBlockDisplay.css | 458 +++++ xmodule/assets/HtmlBlockDisplay.scss | 6 - xmodule/assets/HtmlBlockEditor.css | 182 ++ xmodule/assets/HtmlBlockEditor.scss | 7 - xmodule/assets/LTIBlockDisplay.css | 51 + xmodule/assets/LTIBlockDisplay.scss | 3 - xmodule/assets/PollBlockDisplay.css | 194 ++ xmodule/assets/PollBlockDisplay.scss | 3 - xmodule/assets/ProblemBlockDisplay.css | 1246 +++++++++++++ xmodule/assets/ProblemBlockDisplay.scss | 3 - xmodule/assets/ProblemBlockEditor.css | 185 ++ xmodule/assets/ProblemBlockEditor.scss | 4 - xmodule/assets/README.rst | 29 +- xmodule/assets/SequenceBlockDisplay.css | 284 +++ xmodule/assets/SequenceBlockDisplay.scss | 3 - xmodule/assets/VideoBlockDisplay.css | 962 ++++++++++ xmodule/assets/VideoBlockDisplay.scss | 4 - xmodule/assets/VideoBlockEditor.css | 139 ++ xmodule/assets/VideoBlockEditor.scss | 3 - xmodule/assets/WordCloudBlockDisplay.css | 26 + xmodule/assets/WordCloudBlockDisplay.scss | 3 - xmodule/assets/annotatable/_display.scss | 197 --- xmodule/assets/capa/_display.scss | 1747 ------------------- xmodule/assets/codemirror/_codemirror.scss | 5 - xmodule/assets/editor/_edit.scss | 83 - xmodule/assets/html/_display.scss | 318 ---- xmodule/assets/html/_edit.scss | 14 - xmodule/assets/lti/_lti.scss | 65 - xmodule/assets/poll/_display.scss | 226 --- xmodule/assets/problem/_edit.scss | 109 -- xmodule/assets/sequence/_display.scss | 340 ---- xmodule/assets/tabs/_codemirror.scss | 20 - xmodule/assets/tabs/_tabs.scss | 141 -- xmodule/assets/video/_accessible_menu.scss | 237 --- xmodule/assets/video/_display.scss | 1043 ----------- xmodule/assets/word_cloud/_display.scss | 30 - xmodule/capa_block.py | 6 +- xmodule/html_block.py | 6 +- xmodule/lti_block.py | 4 +- xmodule/poll_block.py | 4 +- xmodule/seq_block.py | 6 +- xmodule/template_block.py | 4 +- xmodule/tests/test_util_builtin_assets.py | 36 +- xmodule/util/builtin_assets.py | 44 +- xmodule/video_block/video_block.py | 8 +- xmodule/word_cloud_block.py | 4 +- 54 files changed, 3995 insertions(+), 4771 deletions(-) create mode 100644 xmodule/assets/AnnotatableBlockDisplay.css delete mode 100644 xmodule/assets/AnnotatableBlockDisplay.scss create mode 100644 xmodule/assets/AnnotatableBlockEditor.css delete mode 100644 xmodule/assets/AnnotatableBlockEditor.scss create mode 100644 xmodule/assets/CustomTagBlockEditor.css delete mode 100644 xmodule/assets/CustomTagBlockEditor.scss create mode 100644 xmodule/assets/HtmlBlockDisplay.css delete mode 100644 xmodule/assets/HtmlBlockDisplay.scss create mode 100644 xmodule/assets/HtmlBlockEditor.css delete mode 100644 xmodule/assets/HtmlBlockEditor.scss create mode 100644 xmodule/assets/LTIBlockDisplay.css delete mode 100644 xmodule/assets/LTIBlockDisplay.scss create mode 100644 xmodule/assets/PollBlockDisplay.css delete mode 100644 xmodule/assets/PollBlockDisplay.scss create mode 100644 xmodule/assets/ProblemBlockDisplay.css delete mode 100644 xmodule/assets/ProblemBlockDisplay.scss create mode 100644 xmodule/assets/ProblemBlockEditor.css delete mode 100644 xmodule/assets/ProblemBlockEditor.scss create mode 100644 xmodule/assets/SequenceBlockDisplay.css delete mode 100644 xmodule/assets/SequenceBlockDisplay.scss create mode 100644 xmodule/assets/VideoBlockDisplay.css delete mode 100644 xmodule/assets/VideoBlockDisplay.scss create mode 100644 xmodule/assets/VideoBlockEditor.css delete mode 100644 xmodule/assets/VideoBlockEditor.scss create mode 100644 xmodule/assets/WordCloudBlockDisplay.css delete mode 100644 xmodule/assets/WordCloudBlockDisplay.scss delete mode 100644 xmodule/assets/annotatable/_display.scss delete mode 100644 xmodule/assets/capa/_display.scss delete mode 100644 xmodule/assets/codemirror/_codemirror.scss delete mode 100644 xmodule/assets/editor/_edit.scss delete mode 100644 xmodule/assets/html/_display.scss delete mode 100644 xmodule/assets/html/_edit.scss delete mode 100644 xmodule/assets/lti/_lti.scss delete mode 100644 xmodule/assets/poll/_display.scss delete mode 100644 xmodule/assets/problem/_edit.scss delete mode 100644 xmodule/assets/sequence/_display.scss delete mode 100644 xmodule/assets/tabs/_codemirror.scss delete mode 100644 xmodule/assets/tabs/_tabs.scss delete mode 100644 xmodule/assets/video/_accessible_menu.scss delete mode 100644 xmodule/assets/video/_display.scss delete mode 100644 xmodule/assets/word_cloud/_display.scss diff --git a/scripts/compile_sass.py b/scripts/compile_sass.py index ec1efee24d2b..14b84d003af6 100755 --- a/scripts/compile_sass.py +++ b/scripts/compile_sass.py @@ -352,18 +352,6 @@ def compile_sass_dir( repo / "lms" / "static" / "sass", ], ) - compile_sass_dir( - "Compiling built-in XBlock Sass for default LMS", - repo / "xmodule" / "assets", - repo / "lms" / "static" / "css", - includes=[ - *common_includes, - repo / "lms" / "static" / "sass" / "partials", - repo / "cms" / "static" / "sass" / "partials", - repo / "lms" / "static" / "sass", - repo / "cms" / "static" / "sass", - ], - ) if not skip_cms: compile_sass_dir( "Compiling default CMS Sass", @@ -376,18 +364,6 @@ def compile_sass_dir( repo / "cms" / "static" / "sass", ], ) - compile_sass_dir( - "Compiling built-in XBlock Sass for default CMS", - repo / "xmodule" / "assets", - repo / "cms" / "static" / "css", - includes=[ - *common_includes, - repo / "lms" / "static" / "sass" / "partials", - repo / "cms" / "static" / "sass" / "partials", - repo / "lms" / "static" / "sass", - repo / "cms" / "static" / "sass", - ], - ) click.secho(f"Done compiling default Sass!", fg="cyan", bold=True) click.echo() @@ -429,20 +405,6 @@ def compile_sass_dir( ], tolerate_missing=True, ) - compile_sass_dir( - "Compiling built-in XBlock Sass for themed LMS", - repo / "xmodule" / "assets", - theme / "lms" / "static" / "css", - includes=[ - *common_includes, - theme / "lms" / "static" / "sass" / "partials", - theme / "cms" / "static" / "sass" / "partials", - repo / "lms" / "static" / "sass" / "partials", - repo / "cms" / "static" / "sass" / "partials", - repo / "lms" / "static" / "sass", - repo / "cms" / "static" / "sass", - ], - ) if not skip_cms: compile_sass_dir( "Compiling default CMS Sass with themed partials", @@ -470,20 +432,6 @@ def compile_sass_dir( ], tolerate_missing=True, ) - compile_sass_dir( - "Compiling built-in XBlock Sass for themed CMS", - repo / "xmodule" / "assets", - theme / "cms" / "static" / "css", - includes=[ - *common_includes, - theme / "lms" / "static" / "sass" / "partials", - theme / "cms" / "static" / "sass" / "partials", - repo / "lms" / "static" / "sass" / "partials", - repo / "cms" / "static" / "sass" / "partials", - repo / "lms" / "static" / "sass", - repo / "cms" / "static" / "sass", - ], - ) click.secho(f"Done compiling Sass for theme at {theme}!", fg="cyan", bold=True) click.echo() diff --git a/xmodule/annotatable_block.py b/xmodule/annotatable_block.py index e41e2b17a52f..cec677f6c5d5 100644 --- a/xmodule/annotatable_block.py +++ b/xmodule/annotatable_block.py @@ -11,7 +11,7 @@ from openedx.core.djangolib.markup import HTML, Text from xmodule.editing_block import EditingMixin from xmodule.raw_block import RawMixin -from xmodule.util.builtin_assets import add_webpack_js_to_fragment, add_sass_to_fragment +from xmodule.util.builtin_assets import add_webpack_js_to_fragment, add_css_to_fragment from xmodule.xml_block import XmlMixin from xmodule.x_module import ( ResourceTemplates, @@ -180,7 +180,7 @@ def student_view(self, context): # lint-amnesty, pylint: disable=unused-argumen """ fragment = Fragment() fragment.add_content(self.get_html()) - add_sass_to_fragment(fragment, 'AnnotatableBlockDisplay.scss') + add_css_to_fragment(fragment, 'AnnotatableBlockDisplay.css') add_webpack_js_to_fragment(fragment, 'AnnotatableBlockDisplay') shim_xmodule_js(fragment, 'Annotatable') @@ -193,7 +193,7 @@ def studio_view(self, _context): fragment = Fragment( self.runtime.service(self, 'mako').render_cms_template(self.mako_template, self.get_context()) ) - add_sass_to_fragment(fragment, 'AnnotatableBlockEditor.scss') + add_css_to_fragment(fragment, 'AnnotatableBlockEditor.css') add_webpack_js_to_fragment(fragment, 'AnnotatableBlockEditor') shim_xmodule_js(fragment, self.studio_js_module_name) return fragment diff --git a/xmodule/assets/AnnotatableBlockDisplay.css b/xmodule/assets/AnnotatableBlockDisplay.css new file mode 100644 index 000000000000..6ac353ad5435 --- /dev/null +++ b/xmodule/assets/AnnotatableBlockDisplay.css @@ -0,0 +1,197 @@ +@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,700"); +/* line 1, /openedx/edx-platform/xmodule/assets/AnnotatableBlockDisplay.scss */ +.xmodule_display.xmodule_AnnotatableBlock { + /* TODO: move top-level variables to a common _variables.scss. + * NOTE: These variables were only added here because when this was integrated with the CMS, + * SASS compilation errors were triggered because the CMS didn't have the same variables defined + * that the LMS did, so the quick fix was to localize the LMS variables not shared by the CMS. + * -Abarrett and Vshnayder + */ + /* stylelint-disable-line */ + /* stylelint-disable-line */ } + /* line 15, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */ + .xmodule_display.xmodule_AnnotatableBlock .annotatable-wrapper { + position: relative; } + /* line 19, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */ + .xmodule_display.xmodule_AnnotatableBlock .annotatable-header { + margin-bottom: 0.5em; } + /* line 23, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */ + .xmodule_display.xmodule_AnnotatableBlock .annotatable-section { + position: relative; + padding: 0.5em 1em; + border: 1px solid var(--gray-l3); + border-radius: 0.5em; + margin-bottom: 0.5em; } + /* line 30, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */ + .xmodule_display.xmodule_AnnotatableBlock .annotatable-section.shaded { + background-color: #ededed; } + /* line 32, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */ + .xmodule_display.xmodule_AnnotatableBlock .annotatable-section .annotatable-section-title { + font-weight: bold; } + /* line 34, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */ + .xmodule_display.xmodule_AnnotatableBlock .annotatable-section .annotatable-section-title a { + font-weight: normal; } + /* line 37, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */ + .xmodule_display.xmodule_AnnotatableBlock .annotatable-section .annotatable-section-body { + border-top: 1px solid var(--gray-l3); + margin-top: 0.5em; + padding-top: 0.5em; } + /* line 15, /openedx/edx-platform/common/static/sass/bourbon/addons/_clearfix.scss */ + .xmodule_display.xmodule_AnnotatableBlock .annotatable-section .annotatable-section-body:after { + content: ""; + display: table; + clear: both; } + /* line 45, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */ + .xmodule_display.xmodule_AnnotatableBlock .annotatable-section ul.instructions-template { + list-style: disc; + margin-left: 4em; } + /* line 48, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */ + .xmodule_display.xmodule_AnnotatableBlock .annotatable-section ul.instructions-template b { + font-weight: bold; } + /* line 49, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */ + .xmodule_display.xmodule_AnnotatableBlock .annotatable-section ul.instructions-template i { + font-style: italic; } + /* line 51, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */ + .xmodule_display.xmodule_AnnotatableBlock .annotatable-section ul.instructions-template code { + display: inline; + white-space: pre; + font-family: Courier New, monospace; } + /* line 59, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */ + .xmodule_display.xmodule_AnnotatableBlock .annotatable-toggle { + position: absolute; + right: 0; + margin: 2px 1em 2px 0; } + /* line 63, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */ + .xmodule_display.xmodule_AnnotatableBlock .annotatable-toggle.expanded::after { + content: " \2191"; } + /* line 64, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */ + .xmodule_display.xmodule_AnnotatableBlock .annotatable-toggle.collapsed::after { + content: " \2193"; } + /* line 67, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */ + .xmodule_display.xmodule_AnnotatableBlock .annotatable-span { + display: inline; } + /* line 88, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */ + .xmodule_display.xmodule_AnnotatableBlock .annotatable-span.highlight { + background-color: rgba(255, 255, 10, 0.3); } + /* line 90, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */ + .xmodule_display.xmodule_AnnotatableBlock .annotatable-span.highlight.selected { + background-color: rgba(255, 255, 10, 0.9); } + /* line 94, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */ + .xmodule_display.xmodule_AnnotatableBlock .annotatable-span.highlight-yellow { + background-color: rgba(255, 255, 10, 0.3); } + /* line 96, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */ + .xmodule_display.xmodule_AnnotatableBlock .annotatable-span.highlight-yellow.selected { + background-color: rgba(255, 255, 10, 0.9); } + /* line 94, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */ + .xmodule_display.xmodule_AnnotatableBlock .annotatable-span.highlight-red { + background-color: rgba(178, 19, 16, 0.3); } + /* line 96, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */ + .xmodule_display.xmodule_AnnotatableBlock .annotatable-span.highlight-red.selected { + background-color: rgba(178, 19, 16, 0.9); } + /* line 94, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */ + .xmodule_display.xmodule_AnnotatableBlock .annotatable-span.highlight-orange { + background-color: rgba(255, 165, 0, 0.3); } + /* line 96, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */ + .xmodule_display.xmodule_AnnotatableBlock .annotatable-span.highlight-orange.selected { + background-color: rgba(255, 165, 0, 0.9); } + /* line 94, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */ + .xmodule_display.xmodule_AnnotatableBlock .annotatable-span.highlight-green { + background-color: rgba(25, 255, 132, 0.3); } + /* line 96, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */ + .xmodule_display.xmodule_AnnotatableBlock .annotatable-span.highlight-green.selected { + background-color: rgba(25, 255, 132, 0.9); } + /* line 94, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */ + .xmodule_display.xmodule_AnnotatableBlock .annotatable-span.highlight-blue { + background-color: rgba(35, 163, 255, 0.3); } + /* line 96, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */ + .xmodule_display.xmodule_AnnotatableBlock .annotatable-span.highlight-blue.selected { + background-color: rgba(35, 163, 255, 0.9); } + /* line 94, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */ + .xmodule_display.xmodule_AnnotatableBlock .annotatable-span.highlight-purple { + background-color: rgba(115, 9, 178, 0.3); } + /* line 96, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */ + .xmodule_display.xmodule_AnnotatableBlock .annotatable-span.highlight-purple.selected { + background-color: rgba(115, 9, 178, 0.9); } + /* line 100, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */ + .xmodule_display.xmodule_AnnotatableBlock .annotatable-span.hide { + cursor: none; + background-color: inherit; } + /* line 104, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */ + .xmodule_display.xmodule_AnnotatableBlock .annotatable-span.hide .annotatable-icon { + display: none; } + /* line 109, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */ + .xmodule_display.xmodule_AnnotatableBlock .annotatable-span .annotatable-comment { + display: none; } + /* line 114, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */ + .xmodule_display.xmodule_AnnotatableBlock .ui-tooltip.qtip.ui-tooltip { + font-size: 0.875em; + border: 1px solid #333; + border-radius: 1em; + background-color: rgba(0, 0, 0, 0.85); + color: var(--white); + -webkit-font-smoothing: antialiased; } + /* line 122, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */ + .xmodule_display.xmodule_AnnotatableBlock .ui-tooltip.qtip.ui-tooltip .ui-tooltip-titlebar { + font-size: 1em; + color: inherit; + background-color: transparent; + padding: calc((var(--baseline)/4)) calc((var(--baseline)/2)); + border: none; } + /* line 129, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */ + .xmodule_display.xmodule_AnnotatableBlock .ui-tooltip.qtip.ui-tooltip .ui-tooltip-titlebar .ui-tooltip-title { + padding: calc((var(--baseline)/4)) 0; + border-bottom: 2px solid #333; + font-weight: bold; } + /* line 135, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */ + .xmodule_display.xmodule_AnnotatableBlock .ui-tooltip.qtip.ui-tooltip .ui-tooltip-titlebar .ui-tooltip-icon { + right: 10px; + background: #333; } + /* line 140, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */ + .xmodule_display.xmodule_AnnotatableBlock .ui-tooltip.qtip.ui-tooltip .ui-tooltip-titlebar .ui-state-hover { + color: inherit; + border: 1px solid var(--gray-l3); } + /* line 146, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */ + .xmodule_display.xmodule_AnnotatableBlock .ui-tooltip.qtip.ui-tooltip .ui-tooltip-content { + color: inherit; + font-size: 0.875em; + text-align: left; + font-weight: 400; + padding: 0 calc((var(--baseline)/2)) calc((var(--baseline)/2)) calc((var(--baseline)/2)); + background-color: transparent; + border-color: transparent; } + /* line 156, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */ + .xmodule_display.xmodule_AnnotatableBlock .ui-tooltip.qtip.ui-tooltip p { + color: inherit; + line-height: normal; } + /* line 162, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */ + .xmodule_display.xmodule_AnnotatableBlock .ui-tooltip.qtip.ui-tooltip-annotatable { + max-width: 375px; } + /* line 165, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */ + .xmodule_display.xmodule_AnnotatableBlock .ui-tooltip.qtip.ui-tooltip-annotatable .ui-tooltip-content { + padding: 0 calc((var(--baseline)/2)); } + /* line 168, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */ + .xmodule_display.xmodule_AnnotatableBlock .ui-tooltip.qtip.ui-tooltip-annotatable .ui-tooltip-content .annotatable-comment { + display: block; + margin: 0 0 calc((var(--baseline)/2)) 0; + max-height: 225px; + overflow: auto; + line-height: normal; } + /* line 176, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */ + .xmodule_display.xmodule_AnnotatableBlock .ui-tooltip.qtip.ui-tooltip-annotatable .ui-tooltip-content .annotatable-reply { + display: block; + border-top: 2px solid #333; + padding: calc((var(--baseline)/4)) 0; + margin: 0; + text-align: center; } + /* line 185, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */ + .xmodule_display.xmodule_AnnotatableBlock .ui-tooltip.qtip.ui-tooltip-annotatable::after { + content: ''; + display: inline-block; + position: absolute; + bottom: -20px; + left: 50%; + height: 0; + width: 0; + margin-left: calc(-1 * (var(--baseline) / 4)); + border: 10px solid transparent; + border-top-color: rgba(0, 0, 0, 0.85); } diff --git a/xmodule/assets/AnnotatableBlockDisplay.scss b/xmodule/assets/AnnotatableBlockDisplay.scss deleted file mode 100644 index 66e1e756f3da..000000000000 --- a/xmodule/assets/AnnotatableBlockDisplay.scss +++ /dev/null @@ -1,3 +0,0 @@ -.xmodule_display.xmodule_AnnotatableBlock { - @import "annotatable/display.scss"; -} diff --git a/xmodule/assets/AnnotatableBlockEditor.css b/xmodule/assets/AnnotatableBlockEditor.css new file mode 100644 index 000000000000..daff8d645d31 --- /dev/null +++ b/xmodule/assets/AnnotatableBlockEditor.css @@ -0,0 +1,5 @@ +/* line 1, /openedx/edx-platform/xmodule/assets/codemirror/_codemirror.scss */ +.xmodule_edit.xmodule_AnnotatableBlock .CodeMirror { + background: #fff; + font-size: 13px; + color: #3c3c3c; } diff --git a/xmodule/assets/AnnotatableBlockEditor.scss b/xmodule/assets/AnnotatableBlockEditor.scss deleted file mode 100644 index 8f2852422d7d..000000000000 --- a/xmodule/assets/AnnotatableBlockEditor.scss +++ /dev/null @@ -1,3 +0,0 @@ -.xmodule_edit.xmodule_AnnotatableBlock { - @import "codemirror/codemirror.scss"; -} diff --git a/xmodule/assets/CustomTagBlockEditor.css b/xmodule/assets/CustomTagBlockEditor.css new file mode 100644 index 000000000000..bdf9bb19029c --- /dev/null +++ b/xmodule/assets/CustomTagBlockEditor.css @@ -0,0 +1,5 @@ +/* line 1, /openedx/edx-platform/xmodule/assets/codemirror/_codemirror.scss */ +.xmodule_edit.xmodule_CustomTagBlock .CodeMirror { + background: #fff; + font-size: 13px; + color: #3c3c3c; } diff --git a/xmodule/assets/CustomTagBlockEditor.scss b/xmodule/assets/CustomTagBlockEditor.scss deleted file mode 100644 index 3abd162c808d..000000000000 --- a/xmodule/assets/CustomTagBlockEditor.scss +++ /dev/null @@ -1,3 +0,0 @@ -.xmodule_edit.xmodule_CustomTagBlock { - @import "codemirror/codemirror.scss"; -} diff --git a/xmodule/assets/HtmlBlockDisplay.css b/xmodule/assets/HtmlBlockDisplay.css new file mode 100644 index 000000000000..896abc5f0505 --- /dev/null +++ b/xmodule/assets/HtmlBlockDisplay.css @@ -0,0 +1,458 @@ +@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,700"); +/* line 1, /openedx/edx-platform/xmodule/assets/HtmlBlockDisplay.scss */ +.xmodule_display.xmodule_AboutBlock, +.xmodule_display.xmodule_CourseInfoBlock, +.xmodule_display.xmodule_HtmlBlock, +.xmodule_display.xmodule_StaticTabBlock { + /* stylelint-disable-line */ + /* stylelint-disable-line */ } + /* line 8, /openedx/edx-platform/xmodule/assets/html/_display.scss */ + .xmodule_display.xmodule_AboutBlock *, + .xmodule_display.xmodule_CourseInfoBlock *, + .xmodule_display.xmodule_HtmlBlock *, + .xmodule_display.xmodule_StaticTabBlock * { + line-height: 1.4em; } + /* line 12, /openedx/edx-platform/xmodule/assets/html/_display.scss */ + .xmodule_display.xmodule_AboutBlock h1, + .xmodule_display.xmodule_CourseInfoBlock h1, + .xmodule_display.xmodule_HtmlBlock h1, + .xmodule_display.xmodule_StaticTabBlock h1 { + color: var(--body-color); + font: normal 2em/1.4em var(--font-family-sans-serif); + letter-spacing: 1px; + margin: 0 0 1.416em; } + /* line 20, /openedx/edx-platform/xmodule/assets/html/_display.scss */ + .xmodule_display.xmodule_AboutBlock h2, + .xmodule_display.xmodule_CourseInfoBlock h2, + .xmodule_display.xmodule_HtmlBlock h2, + .xmodule_display.xmodule_StaticTabBlock h2 { + color: #646464; + font: normal 1.2em/1.2em var(--font-family-sans-serif); + letter-spacing: 1px; + margin-bottom: calc((var(--baseline)*0.75)); + -webkit-font-smoothing: antialiased; } + /* line 28, /openedx/edx-platform/xmodule/assets/html/_display.scss */ + .xmodule_display.xmodule_AboutBlock h3, + .xmodule_display.xmodule_AboutBlock h4, + .xmodule_display.xmodule_AboutBlock h5, + .xmodule_display.xmodule_AboutBlock h6, + .xmodule_display.xmodule_CourseInfoBlock h3, + .xmodule_display.xmodule_CourseInfoBlock h4, + .xmodule_display.xmodule_CourseInfoBlock h5, + .xmodule_display.xmodule_CourseInfoBlock h6, + .xmodule_display.xmodule_HtmlBlock h3, + .xmodule_display.xmodule_HtmlBlock h4, + .xmodule_display.xmodule_HtmlBlock h5, + .xmodule_display.xmodule_HtmlBlock h6, + .xmodule_display.xmodule_StaticTabBlock h3, + .xmodule_display.xmodule_StaticTabBlock h4, + .xmodule_display.xmodule_StaticTabBlock h5, + .xmodule_display.xmodule_StaticTabBlock h6 { + margin: 0 0 calc((var(--baseline)/2)); + font-weight: 600; } + /* line 37, /openedx/edx-platform/xmodule/assets/html/_display.scss */ + .xmodule_display.xmodule_AboutBlock h3, + .xmodule_display.xmodule_CourseInfoBlock h3, + .xmodule_display.xmodule_HtmlBlock h3, + .xmodule_display.xmodule_StaticTabBlock h3 { + font-size: 1.2em; } + /* line 41, /openedx/edx-platform/xmodule/assets/html/_display.scss */ + .xmodule_display.xmodule_AboutBlock h4, + .xmodule_display.xmodule_CourseInfoBlock h4, + .xmodule_display.xmodule_HtmlBlock h4, + .xmodule_display.xmodule_StaticTabBlock h4 { + font-size: 1em; } + /* line 45, /openedx/edx-platform/xmodule/assets/html/_display.scss */ + .xmodule_display.xmodule_AboutBlock h5, + .xmodule_display.xmodule_CourseInfoBlock h5, + .xmodule_display.xmodule_HtmlBlock h5, + .xmodule_display.xmodule_StaticTabBlock h5 { + font-size: 0.83em; } + /* line 49, /openedx/edx-platform/xmodule/assets/html/_display.scss */ + .xmodule_display.xmodule_AboutBlock h6, + .xmodule_display.xmodule_CourseInfoBlock h6, + .xmodule_display.xmodule_HtmlBlock h6, + .xmodule_display.xmodule_StaticTabBlock h6 { + font-size: 0.75em; } + /* line 53, /openedx/edx-platform/xmodule/assets/html/_display.scss */ + .xmodule_display.xmodule_AboutBlock p, + .xmodule_display.xmodule_CourseInfoBlock p, + .xmodule_display.xmodule_HtmlBlock p, + .xmodule_display.xmodule_StaticTabBlock p { + margin-bottom: 1.416em; + font-size: 1em; + line-height: 1.6em !important; + color: var(--body-color); } + /* line 60, /openedx/edx-platform/xmodule/assets/html/_display.scss */ + .xmodule_display.xmodule_AboutBlock em, + .xmodule_display.xmodule_AboutBlock i, + .xmodule_display.xmodule_CourseInfoBlock em, + .xmodule_display.xmodule_CourseInfoBlock i, + .xmodule_display.xmodule_HtmlBlock em, + .xmodule_display.xmodule_HtmlBlock i, + .xmodule_display.xmodule_StaticTabBlock em, + .xmodule_display.xmodule_StaticTabBlock i { + font-style: italic; } + /* line 64, /openedx/edx-platform/xmodule/assets/html/_display.scss */ + .xmodule_display.xmodule_AboutBlock em span, + .xmodule_display.xmodule_AboutBlock i span, + .xmodule_display.xmodule_CourseInfoBlock em span, + .xmodule_display.xmodule_CourseInfoBlock i span, + .xmodule_display.xmodule_HtmlBlock em span, + .xmodule_display.xmodule_HtmlBlock i span, + .xmodule_display.xmodule_StaticTabBlock em span, + .xmodule_display.xmodule_StaticTabBlock i span { + font-style: italic; } + /* line 69, /openedx/edx-platform/xmodule/assets/html/_display.scss */ + .xmodule_display.xmodule_AboutBlock strong, + .xmodule_display.xmodule_AboutBlock b, + .xmodule_display.xmodule_CourseInfoBlock strong, + .xmodule_display.xmodule_CourseInfoBlock b, + .xmodule_display.xmodule_HtmlBlock strong, + .xmodule_display.xmodule_HtmlBlock b, + .xmodule_display.xmodule_StaticTabBlock strong, + .xmodule_display.xmodule_StaticTabBlock b { + font-weight: bold; } + /* line 73, /openedx/edx-platform/xmodule/assets/html/_display.scss */ + .xmodule_display.xmodule_AboutBlock strong span, + .xmodule_display.xmodule_AboutBlock b span, + .xmodule_display.xmodule_CourseInfoBlock strong span, + .xmodule_display.xmodule_CourseInfoBlock b span, + .xmodule_display.xmodule_HtmlBlock strong span, + .xmodule_display.xmodule_HtmlBlock b span, + .xmodule_display.xmodule_StaticTabBlock strong span, + .xmodule_display.xmodule_StaticTabBlock b span { + font-weight: bold; } + /* line 78, /openedx/edx-platform/xmodule/assets/html/_display.scss */ + .xmodule_display.xmodule_AboutBlock p + p, + .xmodule_display.xmodule_AboutBlock ul + p, + .xmodule_display.xmodule_AboutBlock ol + p, + .xmodule_display.xmodule_CourseInfoBlock p + p, + .xmodule_display.xmodule_CourseInfoBlock ul + p, + .xmodule_display.xmodule_CourseInfoBlock ol + p, + .xmodule_display.xmodule_HtmlBlock p + p, + .xmodule_display.xmodule_HtmlBlock ul + p, + .xmodule_display.xmodule_HtmlBlock ol + p, + .xmodule_display.xmodule_StaticTabBlock p + p, + .xmodule_display.xmodule_StaticTabBlock ul + p, + .xmodule_display.xmodule_StaticTabBlock ol + p { + margin-top: var(--baseline); } + /* line 84, /openedx/edx-platform/xmodule/assets/html/_display.scss */ + .xmodule_display.xmodule_AboutBlock blockquote, + .xmodule_display.xmodule_CourseInfoBlock blockquote, + .xmodule_display.xmodule_HtmlBlock blockquote, + .xmodule_display.xmodule_StaticTabBlock blockquote { + margin: 1em calc((var(--baseline)*2)); } + /* line 88, /openedx/edx-platform/xmodule/assets/html/_display.scss */ + .xmodule_display.xmodule_AboutBlock ol, + .xmodule_display.xmodule_AboutBlock ul, + .xmodule_display.xmodule_CourseInfoBlock ol, + .xmodule_display.xmodule_CourseInfoBlock ul, + .xmodule_display.xmodule_HtmlBlock ol, + .xmodule_display.xmodule_HtmlBlock ul, + .xmodule_display.xmodule_StaticTabBlock ol, + .xmodule_display.xmodule_StaticTabBlock ul { + padding: 0 0 0 1em; + margin: 1em 0; + color: var(--body-color); } + /* line 96, /openedx/edx-platform/xmodule/assets/html/_display.scss */ + .xmodule_display.xmodule_AboutBlock ol li, + .xmodule_display.xmodule_AboutBlock ul li, + .xmodule_display.xmodule_CourseInfoBlock ol li, + .xmodule_display.xmodule_CourseInfoBlock ul li, + .xmodule_display.xmodule_HtmlBlock ol li, + .xmodule_display.xmodule_HtmlBlock ul li, + .xmodule_display.xmodule_StaticTabBlock ol li, + .xmodule_display.xmodule_StaticTabBlock ul li { + margin-bottom: 0.708em; } + /* line 101, /openedx/edx-platform/xmodule/assets/html/_display.scss */ + .xmodule_display.xmodule_AboutBlock ol, + .xmodule_display.xmodule_CourseInfoBlock ol, + .xmodule_display.xmodule_HtmlBlock ol, + .xmodule_display.xmodule_StaticTabBlock ol { + list-style: decimal outside none; } + /* line 105, /openedx/edx-platform/xmodule/assets/html/_display.scss */ + .xmodule_display.xmodule_AboutBlock ul, + .xmodule_display.xmodule_CourseInfoBlock ul, + .xmodule_display.xmodule_HtmlBlock ul, + .xmodule_display.xmodule_StaticTabBlock ul { + list-style: disc outside none; } + /* line 110, /openedx/edx-platform/xmodule/assets/html/_display.scss */ + .xmodule_display.xmodule_AboutBlock a:link, .xmodule_display.xmodule_AboutBlock a:visited, .xmodule_display.xmodule_AboutBlock a:hover, .xmodule_display.xmodule_AboutBlock a:active, .xmodule_display.xmodule_AboutBlock a:focus, + .xmodule_display.xmodule_CourseInfoBlock a:link, + .xmodule_display.xmodule_CourseInfoBlock a:visited, + .xmodule_display.xmodule_CourseInfoBlock a:hover, + .xmodule_display.xmodule_CourseInfoBlock a:active, + .xmodule_display.xmodule_CourseInfoBlock a:focus, + .xmodule_display.xmodule_HtmlBlock a:link, + .xmodule_display.xmodule_HtmlBlock a:visited, + .xmodule_display.xmodule_HtmlBlock a:hover, + .xmodule_display.xmodule_HtmlBlock a:active, + .xmodule_display.xmodule_HtmlBlock a:focus, + .xmodule_display.xmodule_StaticTabBlock a:link, + .xmodule_display.xmodule_StaticTabBlock a:visited, + .xmodule_display.xmodule_StaticTabBlock a:hover, + .xmodule_display.xmodule_StaticTabBlock a:active, + .xmodule_display.xmodule_StaticTabBlock a:focus { + color: var(--blue); } + /* line 119, /openedx/edx-platform/xmodule/assets/html/_display.scss */ + .xmodule_display.xmodule_AboutBlock img, + .xmodule_display.xmodule_CourseInfoBlock img, + .xmodule_display.xmodule_HtmlBlock img, + .xmodule_display.xmodule_StaticTabBlock img { + max-width: 100%; } + /* line 123, /openedx/edx-platform/xmodule/assets/html/_display.scss */ + .xmodule_display.xmodule_AboutBlock pre, + .xmodule_display.xmodule_CourseInfoBlock pre, + .xmodule_display.xmodule_HtmlBlock pre, + .xmodule_display.xmodule_StaticTabBlock pre { + margin: 1em 0; + color: var(--body-color); + font-family: monospace, serif; + font-size: 1em; + white-space: pre-wrap; + word-wrap: break-word; } + /* line 132, /openedx/edx-platform/xmodule/assets/html/_display.scss */ + .xmodule_display.xmodule_AboutBlock code, + .xmodule_display.xmodule_CourseInfoBlock code, + .xmodule_display.xmodule_HtmlBlock code, + .xmodule_display.xmodule_StaticTabBlock code { + color: var(--body-color); + font-family: monospace, serif; + background: none; + padding: 0; } + /* line 139, /openedx/edx-platform/xmodule/assets/html/_display.scss */ + .xmodule_display.xmodule_AboutBlock table, + .xmodule_display.xmodule_CourseInfoBlock table, + .xmodule_display.xmodule_HtmlBlock table, + .xmodule_display.xmodule_StaticTabBlock table { + width: 100%; + margin: var(--baseline) 0; + border-collapse: collapse; + font-size: 16px; } + /* line 145, /openedx/edx-platform/xmodule/assets/html/_display.scss */ + .xmodule_display.xmodule_AboutBlock table td, + .xmodule_display.xmodule_AboutBlock table th, + .xmodule_display.xmodule_CourseInfoBlock table td, + .xmodule_display.xmodule_CourseInfoBlock table th, + .xmodule_display.xmodule_HtmlBlock table td, + .xmodule_display.xmodule_HtmlBlock table th, + .xmodule_display.xmodule_StaticTabBlock table td, + .xmodule_display.xmodule_StaticTabBlock table th { + margin: var(--baseline) 0; + padding: calc((var(--baseline)/2)); + border: 1px solid var(--gray-l3); + font-size: 14px; } + /* line 152, /openedx/edx-platform/xmodule/assets/html/_display.scss */ + .xmodule_display.xmodule_AboutBlock table td.cont-justified-left, + .xmodule_display.xmodule_AboutBlock table th.cont-justified-left, + .xmodule_display.xmodule_CourseInfoBlock table td.cont-justified-left, + .xmodule_display.xmodule_CourseInfoBlock table th.cont-justified-left, + .xmodule_display.xmodule_HtmlBlock table td.cont-justified-left, + .xmodule_display.xmodule_HtmlBlock table th.cont-justified-left, + .xmodule_display.xmodule_StaticTabBlock table td.cont-justified-left, + .xmodule_display.xmodule_StaticTabBlock table th.cont-justified-left { + text-align: left !important; } + /* line 156, /openedx/edx-platform/xmodule/assets/html/_display.scss */ + .xmodule_display.xmodule_AboutBlock table td.cont-justified-right, + .xmodule_display.xmodule_AboutBlock table th.cont-justified-right, + .xmodule_display.xmodule_CourseInfoBlock table td.cont-justified-right, + .xmodule_display.xmodule_CourseInfoBlock table th.cont-justified-right, + .xmodule_display.xmodule_HtmlBlock table td.cont-justified-right, + .xmodule_display.xmodule_HtmlBlock table th.cont-justified-right, + .xmodule_display.xmodule_StaticTabBlock table td.cont-justified-right, + .xmodule_display.xmodule_StaticTabBlock table th.cont-justified-right { + text-align: right !important; } + /* line 160, /openedx/edx-platform/xmodule/assets/html/_display.scss */ + .xmodule_display.xmodule_AboutBlock table td.cont-justified-center, + .xmodule_display.xmodule_AboutBlock table th.cont-justified-center, + .xmodule_display.xmodule_CourseInfoBlock table td.cont-justified-center, + .xmodule_display.xmodule_CourseInfoBlock table th.cont-justified-center, + .xmodule_display.xmodule_HtmlBlock table td.cont-justified-center, + .xmodule_display.xmodule_HtmlBlock table th.cont-justified-center, + .xmodule_display.xmodule_StaticTabBlock table td.cont-justified-center, + .xmodule_display.xmodule_StaticTabBlock table th.cont-justified-center { + text-align: center !important; } + /* line 166, /openedx/edx-platform/xmodule/assets/html/_display.scss */ + .xmodule_display.xmodule_AboutBlock th, + .xmodule_display.xmodule_CourseInfoBlock th, + .xmodule_display.xmodule_HtmlBlock th, + .xmodule_display.xmodule_StaticTabBlock th { + background: #eee; + font-weight: bold; } + /* line 177, /openedx/edx-platform/xmodule/assets/html/_display.scss */ + .xmodule_display.xmodule_AboutBlock .wrapper-modal-image .modal-ui-icon, + .xmodule_display.xmodule_CourseInfoBlock .wrapper-modal-image .modal-ui-icon, + .xmodule_display.xmodule_HtmlBlock .wrapper-modal-image .modal-ui-icon, + .xmodule_display.xmodule_StaticTabBlock .wrapper-modal-image .modal-ui-icon { + position: absolute; + display: block; + padding: calc((var(--baseline)/4)) 7px; + border-radius: 5px; + opacity: 0.9; + background: var(--white); + color: var(--black); + border: 2px solid var(--black); } + /* line 189, /openedx/edx-platform/xmodule/assets/html/_display.scss */ + .xmodule_display.xmodule_AboutBlock .wrapper-modal-image .modal-ui-icon .label, + .xmodule_display.xmodule_CourseInfoBlock .wrapper-modal-image .modal-ui-icon .label, + .xmodule_display.xmodule_HtmlBlock .wrapper-modal-image .modal-ui-icon .label, + .xmodule_display.xmodule_StaticTabBlock .wrapper-modal-image .modal-ui-icon .label { + font-weight: bold; } + /* line 193, /openedx/edx-platform/xmodule/assets/html/_display.scss */ + .xmodule_display.xmodule_AboutBlock .wrapper-modal-image .modal-ui-icon i, + .xmodule_display.xmodule_CourseInfoBlock .wrapper-modal-image .modal-ui-icon i, + .xmodule_display.xmodule_HtmlBlock .wrapper-modal-image .modal-ui-icon i, + .xmodule_display.xmodule_StaticTabBlock .wrapper-modal-image .modal-ui-icon i { + font-style: normal; } + /* line 198, /openedx/edx-platform/xmodule/assets/html/_display.scss */ + .xmodule_display.xmodule_AboutBlock .wrapper-modal-image .image-link, + .xmodule_display.xmodule_CourseInfoBlock .wrapper-modal-image .image-link, + .xmodule_display.xmodule_HtmlBlock .wrapper-modal-image .image-link, + .xmodule_display.xmodule_StaticTabBlock .wrapper-modal-image .image-link { + position: relative; + display: block; } + /* line 204, /openedx/edx-platform/xmodule/assets/html/_display.scss */ + .xmodule_display.xmodule_AboutBlock .wrapper-modal-image .image-link .action-fullscreen, + .xmodule_display.xmodule_CourseInfoBlock .wrapper-modal-image .image-link .action-fullscreen, + .xmodule_display.xmodule_HtmlBlock .wrapper-modal-image .image-link .action-fullscreen, + .xmodule_display.xmodule_StaticTabBlock .wrapper-modal-image .image-link .action-fullscreen { + display: none; + top: 10px; + left: 10px; } + /* line 210, /openedx/edx-platform/xmodule/assets/html/_display.scss */ + .xmodule_display.xmodule_AboutBlock .wrapper-modal-image .image-link:hover .action-fullscreen, + .xmodule_display.xmodule_CourseInfoBlock .wrapper-modal-image .image-link:hover .action-fullscreen, + .xmodule_display.xmodule_HtmlBlock .wrapper-modal-image .image-link:hover .action-fullscreen, + .xmodule_display.xmodule_StaticTabBlock .wrapper-modal-image .image-link:hover .action-fullscreen { + display: block; } + /* line 215, /openedx/edx-platform/xmodule/assets/html/_display.scss */ + .xmodule_display.xmodule_AboutBlock .wrapper-modal-image .image-modal, + .xmodule_display.xmodule_CourseInfoBlock .wrapper-modal-image .image-modal, + .xmodule_display.xmodule_HtmlBlock .wrapper-modal-image .image-modal, + .xmodule_display.xmodule_StaticTabBlock .wrapper-modal-image .image-modal { + position: fixed; + top: 0; + left: 0; + display: none; + height: 100%; + width: 100%; + background-color: rgba(0, 0, 0, 0.7); } + /* line 227, /openedx/edx-platform/xmodule/assets/html/_display.scss */ + .xmodule_display.xmodule_AboutBlock .wrapper-modal-image .image-modal .image-content, + .xmodule_display.xmodule_CourseInfoBlock .wrapper-modal-image .image-modal .image-content, + .xmodule_display.xmodule_HtmlBlock .wrapper-modal-image .image-modal .image-content, + .xmodule_display.xmodule_StaticTabBlock .wrapper-modal-image .image-modal .image-content { + position: relative; + top: 2.5%; + display: block; + height: 95%; + width: 95%; + margin: auto; + overflow: hidden; } + /* line 236, /openedx/edx-platform/xmodule/assets/html/_display.scss */ + .xmodule_display.xmodule_AboutBlock .wrapper-modal-image .image-modal .image-content .image-wrapper, + .xmodule_display.xmodule_CourseInfoBlock .wrapper-modal-image .image-modal .image-content .image-wrapper, + .xmodule_display.xmodule_HtmlBlock .wrapper-modal-image .image-modal .image-content .image-wrapper, + .xmodule_display.xmodule_StaticTabBlock .wrapper-modal-image .image-modal .image-content .image-wrapper { + position: relative; } + /* line 239, /openedx/edx-platform/xmodule/assets/html/_display.scss */ + .xmodule_display.xmodule_AboutBlock .wrapper-modal-image .image-modal .image-content .image-wrapper img, + .xmodule_display.xmodule_CourseInfoBlock .wrapper-modal-image .image-modal .image-content .image-wrapper img, + .xmodule_display.xmodule_HtmlBlock .wrapper-modal-image .image-modal .image-content .image-wrapper img, + .xmodule_display.xmodule_StaticTabBlock .wrapper-modal-image .image-modal .image-content .image-wrapper img { + position: relative; + display: block; + max-width: 100%; + max-height: 100%; + margin: auto; + cursor: default; } + /* line 249, /openedx/edx-platform/xmodule/assets/html/_display.scss */ + .xmodule_display.xmodule_AboutBlock .wrapper-modal-image .image-modal .image-content .action-close, + .xmodule_display.xmodule_CourseInfoBlock .wrapper-modal-image .image-modal .image-content .action-close, + .xmodule_display.xmodule_HtmlBlock .wrapper-modal-image .image-modal .image-content .action-close, + .xmodule_display.xmodule_StaticTabBlock .wrapper-modal-image .image-modal .image-content .action-close { + top: 10px; + right: 10px; } + /* line 254, /openedx/edx-platform/xmodule/assets/html/_display.scss */ + .xmodule_display.xmodule_AboutBlock .wrapper-modal-image .image-modal .image-content .image-controls, + .xmodule_display.xmodule_CourseInfoBlock .wrapper-modal-image .image-modal .image-content .image-controls, + .xmodule_display.xmodule_HtmlBlock .wrapper-modal-image .image-modal .image-content .image-controls, + .xmodule_display.xmodule_StaticTabBlock .wrapper-modal-image .image-modal .image-content .image-controls { + position: absolute; + right: 10px; + bottom: 10px; + margin: 0; + padding: 0; + list-style: none; } + /* line 262, /openedx/edx-platform/xmodule/assets/html/_display.scss */ + .xmodule_display.xmodule_AboutBlock .wrapper-modal-image .image-modal .image-content .image-controls .image-control, + .xmodule_display.xmodule_CourseInfoBlock .wrapper-modal-image .image-modal .image-content .image-controls .image-control, + .xmodule_display.xmodule_HtmlBlock .wrapper-modal-image .image-modal .image-content .image-controls .image-control, + .xmodule_display.xmodule_StaticTabBlock .wrapper-modal-image .image-modal .image-content .image-controls .image-control { + position: relative; + display: inline-block; + margin: 0; + padding: 0; } + /* line 268, /openedx/edx-platform/xmodule/assets/html/_display.scss */ + .xmodule_display.xmodule_AboutBlock .wrapper-modal-image .image-modal .image-content .image-controls .image-control .modal-ui-icon, + .xmodule_display.xmodule_CourseInfoBlock .wrapper-modal-image .image-modal .image-content .image-controls .image-control .modal-ui-icon, + .xmodule_display.xmodule_HtmlBlock .wrapper-modal-image .image-modal .image-content .image-controls .image-control .modal-ui-icon, + .xmodule_display.xmodule_StaticTabBlock .wrapper-modal-image .image-modal .image-content .image-controls .image-control .modal-ui-icon { + position: relative; } + /* line 271, /openedx/edx-platform/xmodule/assets/html/_display.scss */ + .xmodule_display.xmodule_AboutBlock .wrapper-modal-image .image-modal .image-content .image-controls .image-control .modal-ui-icon.action-zoom-in, + .xmodule_display.xmodule_CourseInfoBlock .wrapper-modal-image .image-modal .image-content .image-controls .image-control .modal-ui-icon.action-zoom-in, + .xmodule_display.xmodule_HtmlBlock .wrapper-modal-image .image-modal .image-content .image-controls .image-control .modal-ui-icon.action-zoom-in, + .xmodule_display.xmodule_StaticTabBlock .wrapper-modal-image .image-modal .image-content .image-controls .image-control .modal-ui-icon.action-zoom-in { + margin-right: calc((var(--baseline)/4)); } + /* line 275, /openedx/edx-platform/xmodule/assets/html/_display.scss */ + .xmodule_display.xmodule_AboutBlock .wrapper-modal-image .image-modal .image-content .image-controls .image-control .modal-ui-icon.action-zoom-out, + .xmodule_display.xmodule_CourseInfoBlock .wrapper-modal-image .image-modal .image-content .image-controls .image-control .modal-ui-icon.action-zoom-out, + .xmodule_display.xmodule_HtmlBlock .wrapper-modal-image .image-modal .image-content .image-controls .image-control .modal-ui-icon.action-zoom-out, + .xmodule_display.xmodule_StaticTabBlock .wrapper-modal-image .image-modal .image-content .image-controls .image-control .modal-ui-icon.action-zoom-out { + margin-left: calc((var(--baseline)/4)); } + /* line 279, /openedx/edx-platform/xmodule/assets/html/_display.scss */ + .xmodule_display.xmodule_AboutBlock .wrapper-modal-image .image-modal .image-content .image-controls .image-control .modal-ui-icon.is-disabled, + .xmodule_display.xmodule_CourseInfoBlock .wrapper-modal-image .image-modal .image-content .image-controls .image-control .modal-ui-icon.is-disabled, + .xmodule_display.xmodule_HtmlBlock .wrapper-modal-image .image-modal .image-content .image-controls .image-control .modal-ui-icon.is-disabled, + .xmodule_display.xmodule_StaticTabBlock .wrapper-modal-image .image-modal .image-content .image-controls .image-control .modal-ui-icon.is-disabled { + opacity: 0.5; + cursor: default; } + /* line 288, /openedx/edx-platform/xmodule/assets/html/_display.scss */ + .xmodule_display.xmodule_AboutBlock .wrapper-modal-image .image-modal.image-is-fit-to-screen, + .xmodule_display.xmodule_CourseInfoBlock .wrapper-modal-image .image-modal.image-is-fit-to-screen, + .xmodule_display.xmodule_HtmlBlock .wrapper-modal-image .image-modal.image-is-fit-to-screen, + .xmodule_display.xmodule_StaticTabBlock .wrapper-modal-image .image-modal.image-is-fit-to-screen { + display: block; } + /* line 292, /openedx/edx-platform/xmodule/assets/html/_display.scss */ + .xmodule_display.xmodule_AboutBlock .wrapper-modal-image .image-modal.image-is-fit-to-screen .image-content .image-wrapper, + .xmodule_display.xmodule_CourseInfoBlock .wrapper-modal-image .image-modal.image-is-fit-to-screen .image-content .image-wrapper, + .xmodule_display.xmodule_HtmlBlock .wrapper-modal-image .image-modal.image-is-fit-to-screen .image-content .image-wrapper, + .xmodule_display.xmodule_StaticTabBlock .wrapper-modal-image .image-modal.image-is-fit-to-screen .image-content .image-wrapper { + top: 0 !important; + left: 0 !important; + width: 100% !important; + height: 100% !important; } + /* line 298, /openedx/edx-platform/xmodule/assets/html/_display.scss */ + .xmodule_display.xmodule_AboutBlock .wrapper-modal-image .image-modal.image-is-fit-to-screen .image-content .image-wrapper img, + .xmodule_display.xmodule_CourseInfoBlock .wrapper-modal-image .image-modal.image-is-fit-to-screen .image-content .image-wrapper img, + .xmodule_display.xmodule_HtmlBlock .wrapper-modal-image .image-modal.image-is-fit-to-screen .image-content .image-wrapper img, + .xmodule_display.xmodule_StaticTabBlock .wrapper-modal-image .image-modal.image-is-fit-to-screen .image-content .image-wrapper img { + top: 0 !important; + left: 0 !important; } + /* line 305, /openedx/edx-platform/xmodule/assets/html/_display.scss */ + .xmodule_display.xmodule_AboutBlock .wrapper-modal-image .image-modal.image-is-zoomed, + .xmodule_display.xmodule_CourseInfoBlock .wrapper-modal-image .image-modal.image-is-zoomed, + .xmodule_display.xmodule_HtmlBlock .wrapper-modal-image .image-modal.image-is-zoomed, + .xmodule_display.xmodule_StaticTabBlock .wrapper-modal-image .image-modal.image-is-zoomed { + display: block; } + /* line 309, /openedx/edx-platform/xmodule/assets/html/_display.scss */ + .xmodule_display.xmodule_AboutBlock .wrapper-modal-image .image-modal.image-is-zoomed .image-content .image-wrapper img, + .xmodule_display.xmodule_CourseInfoBlock .wrapper-modal-image .image-modal.image-is-zoomed .image-content .image-wrapper img, + .xmodule_display.xmodule_HtmlBlock .wrapper-modal-image .image-modal.image-is-zoomed .image-content .image-wrapper img, + .xmodule_display.xmodule_StaticTabBlock .wrapper-modal-image .image-modal.image-is-zoomed .image-content .image-wrapper img { + max-width: none; + max-height: none; + margin: 0; + cursor: move; } diff --git a/xmodule/assets/HtmlBlockDisplay.scss b/xmodule/assets/HtmlBlockDisplay.scss deleted file mode 100644 index 0bc49706cfff..000000000000 --- a/xmodule/assets/HtmlBlockDisplay.scss +++ /dev/null @@ -1,6 +0,0 @@ -.xmodule_display.xmodule_AboutBlock, -.xmodule_display.xmodule_CourseInfoBlock, -.xmodule_display.xmodule_HtmlBlock, -.xmodule_display.xmodule_StaticTabBlock { - @import "html/display.scss"; -} diff --git a/xmodule/assets/HtmlBlockEditor.css b/xmodule/assets/HtmlBlockEditor.css new file mode 100644 index 000000000000..0b6877d0c4ed --- /dev/null +++ b/xmodule/assets/HtmlBlockEditor.css @@ -0,0 +1,182 @@ +@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,700"); +/* line 1, /openedx/edx-platform/xmodule/assets/HtmlBlockEditor.scss */ +.xmodule_edit.xmodule_AboutBlock, +.xmodule_edit.xmodule_CourseInfoBlock, +.xmodule_edit.xmodule_HtmlBlock, +.xmodule_edit.xmodule_StaticTabBlock { } + /* line 123, common/static/sass/_mixins.scss */ + .xmodule_edit.xmodule_AboutBlock .ui-col-wide, + .xmodule_edit.xmodule_CourseInfoBlock .ui-col-wide, + .xmodule_edit.xmodule_HtmlBlock .ui-col-wide, + .xmodule_edit.xmodule_StaticTabBlock .ui-col-wide { + width: 74.46809%; + margin-right: 2.12766%; + float: left; } + /* line 130, common/static/sass/_mixins.scss */ + .xmodule_edit.xmodule_AboutBlock .ui-col-narrow, + .xmodule_edit.xmodule_CourseInfoBlock .ui-col-narrow, + .xmodule_edit.xmodule_HtmlBlock .ui-col-narrow, + .xmodule_edit.xmodule_StaticTabBlock .ui-col-narrow { + width: 23.40426%; + float: left; } + /* line 342, common/static/sass/_mixins.scss */ + .xmodule_edit.xmodule_AboutBlock .ui-loading, + .xmodule_edit.xmodule_CourseInfoBlock .ui-loading, + .xmodule_edit.xmodule_HtmlBlock .ui-loading, + .xmodule_edit.xmodule_StaticTabBlock .ui-loading { + box-shadow: inset 0 1px 2px 1px rgba(0, 0, 0, 0.2); + padding: 15px 20px; } + /* line 368, common/static/sass/_mixins.scss */ + .xmodule_edit.xmodule_AboutBlock .ui-loading, + .xmodule_edit.xmodule_CourseInfoBlock .ui-loading, + .xmodule_edit.xmodule_HtmlBlock .ui-loading, + .xmodule_edit.xmodule_StaticTabBlock .ui-loading { + animation: fadeIn 0.25s linear 1; + opacity: 0.6; + background-color: #fff; + padding: 30px 20px; + text-align: center; } + /* line 379, common/static/sass/_mixins.scss */ + .xmodule_edit.xmodule_AboutBlock .ui-loading .spin, + .xmodule_edit.xmodule_CourseInfoBlock .ui-loading .spin, + .xmodule_edit.xmodule_HtmlBlock .ui-loading .spin, + .xmodule_edit.xmodule_StaticTabBlock .ui-loading .spin { + display: inline-block; } + /* line 385, common/static/sass/_mixins.scss */ + .xmodule_edit.xmodule_AboutBlock .ui-loading .copy, + .xmodule_edit.xmodule_CourseInfoBlock .ui-loading .copy, + .xmodule_edit.xmodule_HtmlBlock .ui-loading .copy, + .xmodule_edit.xmodule_StaticTabBlock .ui-loading .copy { + padding-left: 5px; } + /* line 390, common/static/sass/_mixins.scss */ + .xmodule_edit.xmodule_AboutBlock .is-hidden, + .xmodule_edit.xmodule_CourseInfoBlock .is-hidden, + .xmodule_edit.xmodule_HtmlBlock .is-hidden, + .xmodule_edit.xmodule_StaticTabBlock .is-hidden { + display: none; } + /* line 9, /openedx/edx-platform/xmodule/assets/editor/_edit.scss */ + .xmodule_edit.xmodule_AboutBlock .editor, + .xmodule_edit.xmodule_CourseInfoBlock .editor, + .xmodule_edit.xmodule_HtmlBlock .editor, + .xmodule_edit.xmodule_StaticTabBlock .editor { + position: relative; } + /* line 12, /openedx/edx-platform/xmodule/assets/editor/_edit.scss */ + .xmodule_edit.xmodule_AboutBlock .editor .row, + .xmodule_edit.xmodule_CourseInfoBlock .editor .row, + .xmodule_edit.xmodule_HtmlBlock .editor .row, + .xmodule_edit.xmodule_StaticTabBlock .editor .row { + position: relative; } + /* line 16, /openedx/edx-platform/xmodule/assets/editor/_edit.scss */ + .xmodule_edit.xmodule_AboutBlock .editor .editor-bar, + .xmodule_edit.xmodule_CourseInfoBlock .editor .editor-bar, + .xmodule_edit.xmodule_HtmlBlock .editor .editor-bar, + .xmodule_edit.xmodule_StaticTabBlock .editor .editor-bar { + background-color: #d4dee8; + background-image: -webkit-linear-gradient(top, #d4dee8, #c9d5e2); + background-image: linear-gradient(to bottom,#d4dee8, #c9d5e2); + position: relative; + padding: calc((var(--baseline)/4)); + border-bottom-color: #a5aaaf; } + /* line 15, /openedx/edx-platform/common/static/sass/bourbon/addons/_clearfix.scss */ + .xmodule_edit.xmodule_AboutBlock .editor .editor-bar:after, + .xmodule_edit.xmodule_CourseInfoBlock .editor .editor-bar:after, + .xmodule_edit.xmodule_HtmlBlock .editor .editor-bar:after, + .xmodule_edit.xmodule_StaticTabBlock .editor .editor-bar:after { + content: ""; + display: table; + clear: both; } + /* line 24, /openedx/edx-platform/xmodule/assets/editor/_edit.scss */ + .xmodule_edit.xmodule_AboutBlock .editor .editor-bar button, + .xmodule_edit.xmodule_CourseInfoBlock .editor .editor-bar button, + .xmodule_edit.xmodule_HtmlBlock .editor .editor-bar button, + .xmodule_edit.xmodule_StaticTabBlock .editor .editor-bar button { + display: inline-block; + float: left; + padding: 3px calc((var(--baseline)/2)) 5px; + margin-left: 7px; + border: 0; + border-radius: 2px; + background: transparent; } + /* line 35, /openedx/edx-platform/xmodule/assets/editor/_edit.scss */ + .xmodule_edit.xmodule_AboutBlock .editor .editor-bar button .icon, + .xmodule_edit.xmodule_CourseInfoBlock .editor .editor-bar button .icon, + .xmodule_edit.xmodule_HtmlBlock .editor .editor-bar button .icon, + .xmodule_edit.xmodule_StaticTabBlock .editor .editor-bar button .icon { + height: 21px; } + /* line 39, /openedx/edx-platform/xmodule/assets/editor/_edit.scss */ + .xmodule_edit.xmodule_AboutBlock .editor .editor-bar button:hover, .xmodule_edit.xmodule_AboutBlock .editor .editor-bar button:focus, + .xmodule_edit.xmodule_CourseInfoBlock .editor .editor-bar button:hover, + .xmodule_edit.xmodule_CourseInfoBlock .editor .editor-bar button:focus, + .xmodule_edit.xmodule_HtmlBlock .editor .editor-bar button:hover, + .xmodule_edit.xmodule_HtmlBlock .editor .editor-bar button:focus, + .xmodule_edit.xmodule_StaticTabBlock .editor .editor-bar button:hover, + .xmodule_edit.xmodule_StaticTabBlock .editor .editor-bar button:focus { + background: rgba(255, 255, 255, 0.5); } + /* line 46, /openedx/edx-platform/xmodule/assets/editor/_edit.scss */ + .xmodule_edit.xmodule_AboutBlock .editor .editor-tabs, + .xmodule_edit.xmodule_CourseInfoBlock .editor .editor-tabs, + .xmodule_edit.xmodule_HtmlBlock .editor .editor-tabs, + .xmodule_edit.xmodule_StaticTabBlock .editor .editor-tabs { + position: absolute; + top: 10px; + right: 10px; + text-align: left; + direction: ltr; } + /* line 54, /openedx/edx-platform/xmodule/assets/editor/_edit.scss */ + .xmodule_edit.xmodule_AboutBlock .editor .editor-tabs li, + .xmodule_edit.xmodule_CourseInfoBlock .editor .editor-tabs li, + .xmodule_edit.xmodule_HtmlBlock .editor .editor-tabs li, + .xmodule_edit.xmodule_StaticTabBlock .editor .editor-tabs li { + float: left; + margin-right: calc((var(--baseline)/4)); } + /* line 58, /openedx/edx-platform/xmodule/assets/editor/_edit.scss */ + .xmodule_edit.xmodule_AboutBlock .editor .editor-tabs li:last-child, + .xmodule_edit.xmodule_CourseInfoBlock .editor .editor-tabs li:last-child, + .xmodule_edit.xmodule_HtmlBlock .editor .editor-tabs li:last-child, + .xmodule_edit.xmodule_StaticTabBlock .editor .editor-tabs li:last-child { + margin-right: 0; } + /* line 63, /openedx/edx-platform/xmodule/assets/editor/_edit.scss */ + .xmodule_edit.xmodule_AboutBlock .editor .editor-tabs .tab, + .xmodule_edit.xmodule_CourseInfoBlock .editor .editor-tabs .tab, + .xmodule_edit.xmodule_HtmlBlock .editor .editor-tabs .tab, + .xmodule_edit.xmodule_StaticTabBlock .editor .editor-tabs .tab { + display: block; + height: 24px; + padding: 7px 20px 3px; + border: 1px solid #a5aaaf; + border-radius: 3px 3px 0 0; + background-color: var(--transparent); + background-image: -webkit-linear-gradient(top, var(--transparent) 87%, rgba(0, 0, 0, 0.06)); + background-image: linear-gradient(to bottom,var(--transparent) 87%, rgba(0, 0, 0, 0.06)); + background-color: #e5ecf3; + font-size: 13px; + color: #3c3c3c; + box-shadow: 1px -1px 1px rgba(0, 0, 0, 0.05); } + /* line 77, /openedx/edx-platform/xmodule/assets/editor/_edit.scss */ + .xmodule_edit.xmodule_AboutBlock .editor .editor-tabs .tab.current, + .xmodule_edit.xmodule_CourseInfoBlock .editor .editor-tabs .tab.current, + .xmodule_edit.xmodule_HtmlBlock .editor .editor-tabs .tab.current, + .xmodule_edit.xmodule_StaticTabBlock .editor .editor-tabs .tab.current { + background: var(--white); + border-bottom-color: var(--white); } + /* line 15, /openedx/edx-platform/common/static/sass/bourbon/addons/_clearfix.scss */ + .xmodule_edit.xmodule_AboutBlock .html-editor:after, + .xmodule_edit.xmodule_CourseInfoBlock .html-editor:after, + .xmodule_edit.xmodule_HtmlBlock .html-editor:after, + .xmodule_edit.xmodule_StaticTabBlock .html-editor:after { + content: ""; + display: table; + clear: both; } + /* line 5, /openedx/edx-platform/xmodule/assets/html/_edit.scss */ + .xmodule_edit.xmodule_AboutBlock .html-editor .CodeMirror, + .xmodule_edit.xmodule_CourseInfoBlock .html-editor .CodeMirror, + .xmodule_edit.xmodule_HtmlBlock .html-editor .CodeMirror, + .xmodule_edit.xmodule_StaticTabBlock .html-editor .CodeMirror { + box-sizing: border-box; + height: 435px; } + /* line 11, /openedx/edx-platform/xmodule/assets/html/_edit.scss */ + .xmodule_edit.xmodule_AboutBlock .html-editor .is-inactive, + .xmodule_edit.xmodule_CourseInfoBlock .html-editor .is-inactive, + .xmodule_edit.xmodule_HtmlBlock .html-editor .is-inactive, + .xmodule_edit.xmodule_StaticTabBlock .html-editor .is-inactive { + display: none; } diff --git a/xmodule/assets/HtmlBlockEditor.scss b/xmodule/assets/HtmlBlockEditor.scss deleted file mode 100644 index 15d60863e28e..000000000000 --- a/xmodule/assets/HtmlBlockEditor.scss +++ /dev/null @@ -1,7 +0,0 @@ -.xmodule_edit.xmodule_AboutBlock, -.xmodule_edit.xmodule_CourseInfoBlock, -.xmodule_edit.xmodule_HtmlBlock, -.xmodule_edit.xmodule_StaticTabBlock { - @import "editor/edit.scss"; - @import "html/edit.scss"; -} diff --git a/xmodule/assets/LTIBlockDisplay.css b/xmodule/assets/LTIBlockDisplay.css new file mode 100644 index 000000000000..11e7ced8516c --- /dev/null +++ b/xmodule/assets/LTIBlockDisplay.css @@ -0,0 +1,51 @@ +@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,700"); +/* line 1, /openedx/edx-platform/xmodule/assets/LTIBlockDisplay.scss */ +.xmodule_display.xmodule_LTIBlock { + /* stylelint-disable-line */ + /* stylelint-disable-line */ + /* stylelint-disable-line */ + /* stylelint-disable-line */ } + /* line 7, /openedx/edx-platform/xmodule/assets/lti/_lti.scss */ + .xmodule_display.xmodule_LTIBlock h2.problem-header { + display: inline-block; } + /* line 11, /openedx/edx-platform/xmodule/assets/lti/_lti.scss */ + .xmodule_display.xmodule_LTIBlock div.problem-progress { + display: inline-block; + padding-left: calc((var(--baseline)/4)); + color: #666; + font-weight: 100; + font-size: 1em; } + /* line 20, /openedx/edx-platform/xmodule/assets/lti/_lti.scss */ + .xmodule_display.xmodule_LTIBlock div.lti { + margin: 0 auto; } + /* line 24, /openedx/edx-platform/xmodule/assets/lti/_lti.scss */ + .xmodule_display.xmodule_LTIBlock div.lti .wrapper-lti-link { + font-size: 14px; + background-color: var(--sidebar-color); + padding: var(--baseline); } + /* line 30, /openedx/edx-platform/xmodule/assets/lti/_lti.scss */ + .xmodule_display.xmodule_LTIBlock div.lti .wrapper-lti-link .lti-link { + margin-bottom: 0; + text-align: right; } + /* line 34, /openedx/edx-platform/xmodule/assets/lti/_lti.scss */ + .xmodule_display.xmodule_LTIBlock div.lti .wrapper-lti-link .lti-link .link_lti_new_window { + font-size: 13px; + line-height: 20.72px; } + /* line 43, /openedx/edx-platform/xmodule/assets/lti/_lti.scss */ + .xmodule_display.xmodule_LTIBlock div.lti form.ltiLaunchForm { + display: none; } + /* line 47, /openedx/edx-platform/xmodule/assets/lti/_lti.scss */ + .xmodule_display.xmodule_LTIBlock div.lti iframe.ltiLaunchFrame { + width: 100%; + height: 800px; + display: block; + border: 0px; } + /* line 54, /openedx/edx-platform/xmodule/assets/lti/_lti.scss */ + .xmodule_display.xmodule_LTIBlock div.lti h4.problem-feedback-label { + font-weight: 100; + font-size: 1em; + font-family: "Source Sans", "Open Sans", Verdana, Geneva, sans-serif, sans-serif; } + /* line 60, /openedx/edx-platform/xmodule/assets/lti/_lti.scss */ + .xmodule_display.xmodule_LTIBlock div.lti div.problem-feedback { + margin-top: calc((var(--baseline)/4)); + margin-bottom: calc((var(--baseline)/4)); } diff --git a/xmodule/assets/LTIBlockDisplay.scss b/xmodule/assets/LTIBlockDisplay.scss deleted file mode 100644 index ea92202df2ad..000000000000 --- a/xmodule/assets/LTIBlockDisplay.scss +++ /dev/null @@ -1,3 +0,0 @@ -.xmodule_display.xmodule_LTIBlock { - @import "lti/lti.scss"; -} diff --git a/xmodule/assets/PollBlockDisplay.css b/xmodule/assets/PollBlockDisplay.css new file mode 100644 index 000000000000..c1b39685a753 --- /dev/null +++ b/xmodule/assets/PollBlockDisplay.css @@ -0,0 +1,194 @@ +@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,700"); +/* line 1, /openedx/edx-platform/xmodule/assets/PollBlockDisplay.scss */ +.xmodule_display.xmodule_PollBlock { + /* stylelint-disable-line */ + /* stylelint-disable-line */ } + @media print { + /* line 6, /openedx/edx-platform/xmodule/assets/poll/_display.scss */ + .xmodule_display.xmodule_PollBlock div.poll_question { + display: block; + width: auto; + padding: 0; } + /* line 12, /openedx/edx-platform/xmodule/assets/poll/_display.scss */ + .xmodule_display.xmodule_PollBlock div.poll_question canvas, .xmodule_display.xmodule_PollBlock div.poll_question img { + page-break-inside: avoid; } } + /* line 17, /openedx/edx-platform/xmodule/assets/poll/_display.scss */ + .xmodule_display.xmodule_PollBlock div.poll_question .inline { + display: inline; } + /* line 21, /openedx/edx-platform/xmodule/assets/poll/_display.scss */ + .xmodule_display.xmodule_PollBlock div.poll_question h3 { + margin-top: 0; + margin-bottom: calc((var(--baseline)*0.75)); + color: #fe57a1; + font-size: 1.9em; } + /* line 28, /openedx/edx-platform/xmodule/assets/poll/_display.scss */ + .xmodule_display.xmodule_PollBlock div.poll_question h3.problem-header div.staff { + margin-top: calc((var(--baseline)*1.5)); + font-size: 80%; } + @media print { + /* line 21, /openedx/edx-platform/xmodule/assets/poll/_display.scss */ + .xmodule_display.xmodule_PollBlock div.poll_question h3 { + display: block; + width: auto; + border-right: 0; } } + /* line 41, /openedx/edx-platform/xmodule/assets/poll/_display.scss */ + .xmodule_display.xmodule_PollBlock div.poll_question p { + text-align: justify; + font-weight: bold; } + /* line 46, /openedx/edx-platform/xmodule/assets/poll/_display.scss */ + .xmodule_display.xmodule_PollBlock div.poll_question .poll_answer { + margin-bottom: var(--baseline); } + /* line 49, /openedx/edx-platform/xmodule/assets/poll/_display.scss */ + .xmodule_display.xmodule_PollBlock div.poll_question .poll_answer.short { + clear: both; } + /* line 53, /openedx/edx-platform/xmodule/assets/poll/_display.scss */ + .xmodule_display.xmodule_PollBlock div.poll_question .poll_answer .question { + height: auto; + clear: both; + min-height: 30px; } + /* line 58, /openedx/edx-platform/xmodule/assets/poll/_display.scss */ + .xmodule_display.xmodule_PollBlock div.poll_question .poll_answer .question.short { + clear: none; + width: 30%; + display: inline; + float: left; } + /* line 65, /openedx/edx-platform/xmodule/assets/poll/_display.scss */ + .xmodule_display.xmodule_PollBlock div.poll_question .poll_answer .question .button { + -webkit-appearance: none; + -webkit-background-clip: padding-box; + -webkit-border-image: none; + -webkit-box-align: center; + -webkit-box-shadow: white 0px 1px 0px 0px inset; + -webkit-font-smoothing: antialiased; + -webkit-rtl-ordering: logical; + -webkit-user-select: text; + -webkit-writing-mode: horizontal-tb; + background-clip: padding-box; + background-color: #eeeeee; + background-image: -webkit-linear-gradient(top, #eeeeee, #d2d2d2); + border-bottom-color: #cacaca; + border-bottom-left-radius: 3px; + border-bottom-right-radius: 3px; + border-bottom-style: solid; + border-bottom-width: 1px; + border-left-color: #cacaca; + border-left-style: solid; + border-left-width: 1px; + border-right-color: #cacaca; + border-right-style: solid; + border-right-width: 1px; + border-top-color: #cacaca; + border-top-left-radius: 3px; + border-top-right-radius: 3px; + border-top-style: solid; + border-top-width: 1px; + box-shadow: white 0px 1px 0px 0px inset; + box-sizing: border-box; + color: #333333; + /* display: inline-block; */ + display: inline; + float: left; + font-family: 'Open Sans', Verdana, Geneva, sans-serif; + font-size: 13px; + font-style: normal; + font-variant: normal; + font-weight: bold; + letter-spacing: normal; + line-height: 25.59375px; + margin-bottom: calc((var(--baseline)*0.75)); + margin: 0; + padding: 0px; + text-align: center; + text-decoration: none; + text-indent: 0px; + text-shadow: #f8f8f8 0px 1px 0px; + text-transform: none; + vertical-align: top; + white-space: pre-line; + width: 25px; + height: 25px; + word-spacing: 0px; + writing-mode: lr-tb; } + /* line 126, /openedx/edx-platform/xmodule/assets/poll/_display.scss */ + .xmodule_display.xmodule_PollBlock div.poll_question .poll_answer .question .button.answered { + -webkit-box-shadow: #61b8e1 0px 1px 0px 0px inset; + background-color: #1d9dd9; + background-image: -webkit-linear-gradient(top, #1d9dd9, #0e7cb0); + border-bottom-color: #0d72a2; + border-left-color: #0d72a2; + border-right-color: #0d72a2; + border-top-color: #0d72a2; + box-shadow: #61b8e1 0px 1px 0px 0px inset; + color: white; + text-shadow: #076794 0px 1px 0px; + background-image: none; } + /* line 140, /openedx/edx-platform/xmodule/assets/poll/_display.scss */ + .xmodule_display.xmodule_PollBlock div.poll_question .poll_answer .question .text { + display: inline; + float: left; + width: 80%; + text-align: left; + min-height: 30px; + margin-left: var(--baseline); + height: auto; + margin-bottom: var(--baseline); } + /* line 152, /openedx/edx-platform/xmodule/assets/poll/_display.scss */ + .xmodule_display.xmodule_PollBlock div.poll_question .poll_answer .question .text.short { + width: 100px; } + /* line 158, /openedx/edx-platform/xmodule/assets/poll/_display.scss */ + .xmodule_display.xmodule_PollBlock div.poll_question .poll_answer .stats { + min-height: 40px; + margin-top: var(--baseline); + clear: both; } + /* line 163, /openedx/edx-platform/xmodule/assets/poll/_display.scss */ + .xmodule_display.xmodule_PollBlock div.poll_question .poll_answer .stats.short { + margin-top: 0; + clear: none; + display: inline; + float: right; + width: 70%; } + /* line 171, /openedx/edx-platform/xmodule/assets/poll/_display.scss */ + .xmodule_display.xmodule_PollBlock div.poll_question .poll_answer .stats .bar { + width: 75%; + height: 20px; + border: 1px solid black; + display: inline; + float: left; + margin-right: calc((var(--baseline)/2)); } + /* line 179, /openedx/edx-platform/xmodule/assets/poll/_display.scss */ + .xmodule_display.xmodule_PollBlock div.poll_question .poll_answer .stats .bar.short { + width: 65%; + height: 20px; + margin-top: 3px; } + /* line 185, /openedx/edx-platform/xmodule/assets/poll/_display.scss */ + .xmodule_display.xmodule_PollBlock div.poll_question .poll_answer .stats .bar .percent { + background-color: gray; + width: 0; + height: 20px; } + /* line 194, /openedx/edx-platform/xmodule/assets/poll/_display.scss */ + .xmodule_display.xmodule_PollBlock div.poll_question .poll_answer .stats .number { + width: 80px; + display: inline; + float: right; + height: 28px; + text-align: right; } + /* line 201, /openedx/edx-platform/xmodule/assets/poll/_display.scss */ + .xmodule_display.xmodule_PollBlock div.poll_question .poll_answer .stats .number.short { + width: 120px; + height: auto; } + /* line 209, /openedx/edx-platform/xmodule/assets/poll/_display.scss */ + .xmodule_display.xmodule_PollBlock div.poll_question .poll_answer.answered { + -webkit-box-shadow: #61b8e1 0 1px 0 0 inset; + background-color: #1d9dd9; + background-image: -webkit-linear-gradient(top, #1d9dd9, #0e7cb0); + border-bottom-color: #0d72a2; + border-left-color: #0d72a2; + border-right-color: #0d72a2; + border-top-color: #0d72a2; + box-shadow: #61b8e1 0 1px 0 0 inset; + color: white; + text-shadow: #076794 0 1px 0; } + /* line 222, /openedx/edx-platform/xmodule/assets/poll/_display.scss */ + .xmodule_display.xmodule_PollBlock div.poll_question .button.reset-button { + clear: both; + float: right; } diff --git a/xmodule/assets/PollBlockDisplay.scss b/xmodule/assets/PollBlockDisplay.scss deleted file mode 100644 index 85110778c742..000000000000 --- a/xmodule/assets/PollBlockDisplay.scss +++ /dev/null @@ -1,3 +0,0 @@ -.xmodule_display.xmodule_PollBlock { - @import "poll/display.scss"; -} diff --git a/xmodule/assets/ProblemBlockDisplay.css b/xmodule/assets/ProblemBlockDisplay.css new file mode 100644 index 000000000000..a5eb148efe08 --- /dev/null +++ b/xmodule/assets/ProblemBlockDisplay.css @@ -0,0 +1,1246 @@ +@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,700"); +/* line 1, /openedx/edx-platform/xmodule/assets/ProblemBlockDisplay.scss */ +.xmodule_display.xmodule_ProblemBlock { + /* stylelint-disable-line */ + /* stylelint-disable-line */ } + /* line 44, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .choicegroup input + label.choicegroup_correct .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input + label.choicegroup_correct .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup .choicegroup input + label.choicetextgroup_correct .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input + label.choicetextgroup_correct .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup .choicegroup input + section.choicetextgroup_correct .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input + section.choicetextgroup_correct .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicegroup input + label.choicegroup_partially-correct .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input + label.choicegroup_partially-correct .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup .choicegroup input + label.choicetextgroup_partially-correct .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input + label.choicetextgroup_partially-correct .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup .choicegroup input + section.choicetextgroup_partially-correct .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input + section.choicetextgroup_partially-correct .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicegroup input + label.choicegroup_incorrect .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input + label.choicegroup_incorrect .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup .choicegroup input + label.choicetextgroup_incorrect .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input + label.choicetextgroup_incorrect .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup .choicegroup input + section.choicetextgroup_incorrect .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input + section.choicetextgroup_incorrect .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .indicator-container .status.correct .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .indicator-container .status.partially-correct .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .indicator-container .status.incorrect .status-icon::after, .xmodule_display.xmodule_ProblemBlock .problem .capa_inputtype.textline > .incorrect .status .status-icon::after, .xmodule_display.xmodule_ProblemBlock .problem .inputtype.formulaequationinput > .incorrect .status .status-icon::after, .xmodule_display.xmodule_ProblemBlock .problem .capa_inputtype.textline > .partially-correct .status .status-icon::after, .xmodule_display.xmodule_ProblemBlock .problem .inputtype.formulaequationinput > .partially-correct .status .status-icon::after, .xmodule_display.xmodule_ProblemBlock .problem .capa_inputtype.textline > .correct .status .status-icon::after, .xmodule_display.xmodule_ProblemBlock .problem .inputtype.formulaequationinput > .correct .status .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .imageinput.capa_inputtype .correct .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .imageinput.capa_inputtype .incorrect .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .imageinput.capa_inputtype .partially-correct .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .annotation-input .correct .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .annotation-input .incorrect .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .annotation-input .partially-correct .status-icon::after { + font-family: FontAwesome; + -webkit-font-smoothing: antialiased; + display: inline-block; + speak: none; } + /* line 67, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock h2 { + margin-top: 0; + margin-bottom: calc((var(--baseline)*0.75)); } + /* line 71, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock h2.problem-header { + display: inline-block; } + /* line 74, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock h2.problem-header section.staff { + margin-top: calc((var(--baseline)*1.5)); + font-size: 80%; } + @media print { + /* line 67, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock h2 { + display: block; + width: auto; + border-right: 0; } } + /* line 87, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock .explanation-title { + font-weight: bold; } + /* line 91, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock .feedback-hint-incorrect, .xmodule_display.xmodule_ProblemBlock .feedback-hint-partially-correct, + .xmodule_display.xmodule_ProblemBlock .feedback-hint-correct { + margin-top: calc((var(--baseline) / 4)); } + /* line 94, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock .feedback-hint-incorrect .icon, .xmodule_display.xmodule_ProblemBlock .feedback-hint-partially-correct .icon, + .xmodule_display.xmodule_ProblemBlock .feedback-hint-correct .icon { + margin-right: calc((var(--baseline) / 4)); } + /* line 102, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock .feedback-hint-incorrect .icon { + color: var(--incorrect); } + /* line 111, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock .feedback-hint-partially-correct .icon, + .xmodule_display.xmodule_ProblemBlock .feedback-hint-correct .icon { + color: var(--correct); } + /* line 116, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock .feedback-hint-text { + color: #646464; } + /* line 120, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock .problem-hint { + margin-bottom: 20px; + width: 100%; } + /* line 125, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock .hint-label { + display: inline-block; + padding-right: 0.5em; } + /* line 130, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock .hint-text { + display: inline-block; } + /* line 134, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock .feedback-hint-multi .hint-text { + display: block; } + /* line 138, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock iframe[seamless] { + overflow: hidden; + padding: 0; + border: 0 none transparent; + background-color: transparent; } + /* line 145, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock .inline-error { + color: var(--error-color-dark); } + /* line 149, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem-progress { + display: inline-block; + color: var(--gray-d1); + font-size: 0.875em; } + /* line 157, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem { + padding-top: var(--baseline); } + @media print { + /* line 157, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem { + display: block; + padding: 0; + width: auto; } + /* line 165, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem canvas, + .xmodule_display.xmodule_ProblemBlock div.problem img { + page-break-inside: avoid; } } + /* line 171, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem input.math { + direction: ltr; } + /* line 175, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .inline { + display: inline; } + /* line 178, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .inline + p { + margin-top: var(--baseline); } + /* line 183, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .question-description { + color: var(--gray-d1); + font-size: var(--small-font-size); } + /* line 188, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem form > label, .xmodule_display.xmodule_ProblemBlock div.problem .problem-group-label { + display: block; + margin-bottom: var(--baseline); + font: inherit; + color: inherit; + -webkit-font-smoothing: initial; } + /* line 196, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .problem-group-label + .question-description { + margin-top: calc(-1 * var(--baseline)); } + /* line 204, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock .wrapper-problem-response + .wrapper-problem-response, + .xmodule_display.xmodule_ProblemBlock .wrapper-problem-response + p { + margin-top: calc((var(--baseline) * 1.5)); } + /* line 210, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .choicegroup, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup { + min-width: 100px; + width: auto !important; + width: 100px; } + /* line 15, /openedx/edx-platform/common/static/sass/bourbon/addons/_clearfix.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .choicegroup:after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup:after { + content: ""; + display: table; + clear: both; } + /* line 217, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .choicegroup label, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup label { + box-sizing: border-box; + display: inline-block; + clear: both; + margin-bottom: calc((var(--baseline)/2)); + border: 2px solid var(--gray-l4); + border-radius: 3px; + padding: calc((var(--baseline)/2)); + width: 100%; } + /* line 228, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .choicegroup label::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup label::after { + margin-left: calc((var(--baseline)*0.75)); } + /* line 233, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .choicegroup .indicator-container, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup .indicator-container { + min-height: 1px; + width: 25px; + display: inline-block; } + /* line 239, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .choicegroup fieldset, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup fieldset { + box-sizing: border-box; } + /* line 243, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .choicegroup input[type="radio"], .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input[type="radio"], .xmodule_display.xmodule_ProblemBlock div.problem .choicegroup input[type="checkbox"], .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input[type="checkbox"] { + margin: calc((var(--baseline)/4)); + margin-right: calc((var(--baseline)/2)); } + /* line 252, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .choicegroup input:focus + label, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input:focus + label, .xmodule_display.xmodule_ProblemBlock div.problem .choicegroup input:hover + label, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input:hover + label { + border: 2px solid var(--blue); } + /* line 260, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .choicegroup input + label.choicegroup_correct, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input + label.choicegroup_correct, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup .choicegroup input + label.choicetextgroup_correct, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input + label.choicetextgroup_correct, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup .choicegroup input + section.choicetextgroup_correct, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input + section.choicetextgroup_correct, .xmodule_display.xmodule_ProblemBlock div.problem .choicegroup input:focus + label.choicegroup_correct, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input:focus + label.choicegroup_correct, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup .choicegroup input:focus + label.choicetextgroup_correct, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input:focus + label.choicetextgroup_correct, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup .choicegroup input:focus + section.choicetextgroup_correct, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input:focus + section.choicetextgroup_correct, .xmodule_display.xmodule_ProblemBlock div.problem .choicegroup input:hover + label.choicegroup_correct, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input:hover + label.choicegroup_correct, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup .choicegroup input:hover + label.choicetextgroup_correct, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input:hover + label.choicetextgroup_correct, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup .choicegroup input:hover + section.choicetextgroup_correct, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input:hover + section.choicetextgroup_correct { + border: 2px solid var(--correct); } + /* line 55, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .choicegroup input + label.choicegroup_correct .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input + label.choicegroup_correct .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup .choicegroup input + label.choicetextgroup_correct .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input + label.choicetextgroup_correct .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup .choicegroup input + section.choicetextgroup_correct .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input + section.choicetextgroup_correct .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicegroup input:focus + label.choicegroup_correct .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input:focus + label.choicegroup_correct .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup .choicegroup input:focus + label.choicetextgroup_correct .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input:focus + label.choicetextgroup_correct .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup .choicegroup input:focus + section.choicetextgroup_correct .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input:focus + section.choicetextgroup_correct .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicegroup input:hover + label.choicegroup_correct .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input:hover + label.choicegroup_correct .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup .choicegroup input:hover + label.choicetextgroup_correct .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input:hover + label.choicetextgroup_correct .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup .choicegroup input:hover + section.choicetextgroup_correct .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input:hover + section.choicetextgroup_correct .status-icon::after { + color: var(--correct); + font-size: 1.2em; + content: ""; } + /* line 266, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .choicegroup input + label.choicegroup_partially-correct, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input + label.choicegroup_partially-correct, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup .choicegroup input + label.choicetextgroup_partially-correct, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input + label.choicetextgroup_partially-correct, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup .choicegroup input + section.choicetextgroup_partially-correct, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input + section.choicetextgroup_partially-correct, .xmodule_display.xmodule_ProblemBlock div.problem .choicegroup input:focus + label.choicegroup_partially-correct, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input:focus + label.choicegroup_partially-correct, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup .choicegroup input:focus + label.choicetextgroup_partially-correct, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input:focus + label.choicetextgroup_partially-correct, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup .choicegroup input:focus + section.choicetextgroup_partially-correct, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input:focus + section.choicetextgroup_partially-correct, .xmodule_display.xmodule_ProblemBlock div.problem .choicegroup input:hover + label.choicegroup_partially-correct, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input:hover + label.choicegroup_partially-correct, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup .choicegroup input:hover + label.choicetextgroup_partially-correct, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input:hover + label.choicetextgroup_partially-correct, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup .choicegroup input:hover + section.choicetextgroup_partially-correct, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input:hover + section.choicetextgroup_partially-correct { + border: 2px solid var(--partially-correct); } + /* line 55, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .choicegroup input + label.choicegroup_partially-correct .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input + label.choicegroup_partially-correct .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup .choicegroup input + label.choicetextgroup_partially-correct .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input + label.choicetextgroup_partially-correct .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup .choicegroup input + section.choicetextgroup_partially-correct .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input + section.choicetextgroup_partially-correct .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicegroup input:focus + label.choicegroup_partially-correct .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input:focus + label.choicegroup_partially-correct .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup .choicegroup input:focus + label.choicetextgroup_partially-correct .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input:focus + label.choicetextgroup_partially-correct .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup .choicegroup input:focus + section.choicetextgroup_partially-correct .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input:focus + section.choicetextgroup_partially-correct .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicegroup input:hover + label.choicegroup_partially-correct .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input:hover + label.choicegroup_partially-correct .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup .choicegroup input:hover + label.choicetextgroup_partially-correct .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input:hover + label.choicetextgroup_partially-correct .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup .choicegroup input:hover + section.choicetextgroup_partially-correct .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input:hover + section.choicetextgroup_partially-correct .status-icon::after { + color: var(--partially-correct); + font-size: 1.2em; + content: ""; } + /* line 272, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .choicegroup input + label.choicegroup_incorrect, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input + label.choicegroup_incorrect, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup .choicegroup input + label.choicetextgroup_incorrect, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input + label.choicetextgroup_incorrect, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup .choicegroup input + section.choicetextgroup_incorrect, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input + section.choicetextgroup_incorrect, .xmodule_display.xmodule_ProblemBlock div.problem .choicegroup input:focus + label.choicegroup_incorrect, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input:focus + label.choicegroup_incorrect, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup .choicegroup input:focus + label.choicetextgroup_incorrect, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input:focus + label.choicetextgroup_incorrect, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup .choicegroup input:focus + section.choicetextgroup_incorrect, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input:focus + section.choicetextgroup_incorrect, .xmodule_display.xmodule_ProblemBlock div.problem .choicegroup input:hover + label.choicegroup_incorrect, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input:hover + label.choicegroup_incorrect, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup .choicegroup input:hover + label.choicetextgroup_incorrect, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input:hover + label.choicetextgroup_incorrect, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup .choicegroup input:hover + section.choicetextgroup_incorrect, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input:hover + section.choicetextgroup_incorrect { + border: 2px solid var(--incorrect); } + /* line 55, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .choicegroup input + label.choicegroup_incorrect .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input + label.choicegroup_incorrect .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup .choicegroup input + label.choicetextgroup_incorrect .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input + label.choicetextgroup_incorrect .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup .choicegroup input + section.choicetextgroup_incorrect .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input + section.choicetextgroup_incorrect .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicegroup input:focus + label.choicegroup_incorrect .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input:focus + label.choicegroup_incorrect .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup .choicegroup input:focus + label.choicetextgroup_incorrect .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input:focus + label.choicetextgroup_incorrect .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup .choicegroup input:focus + section.choicetextgroup_incorrect .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input:focus + section.choicetextgroup_incorrect .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicegroup input:hover + label.choicegroup_incorrect .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input:hover + label.choicegroup_incorrect .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup .choicegroup input:hover + label.choicetextgroup_incorrect .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input:hover + label.choicetextgroup_incorrect .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup .choicegroup input:hover + section.choicetextgroup_incorrect .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input:hover + section.choicetextgroup_incorrect .status-icon::after { + color: var(--incorrect); + font-size: 1.2em; + content: ""; } + /* line 278, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .choicegroup input + label.choicegroup_submitted, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input + label.choicegroup_submitted, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup .choicegroup input + label.choicetextgroup_submitted, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input + label.choicetextgroup_submitted, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup .choicegroup input + section.choicetextgroup_submitted, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input + section.choicetextgroup_submitted, .xmodule_display.xmodule_ProblemBlock div.problem .choicegroup input:focus + label.choicegroup_submitted, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input:focus + label.choicegroup_submitted, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup .choicegroup input:focus + label.choicetextgroup_submitted, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input:focus + label.choicetextgroup_submitted, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup .choicegroup input:focus + section.choicetextgroup_submitted, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input:focus + section.choicetextgroup_submitted, .xmodule_display.xmodule_ProblemBlock div.problem .choicegroup input:hover + label.choicegroup_submitted, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input:hover + label.choicegroup_submitted, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup .choicegroup input:hover + label.choicetextgroup_submitted, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input:hover + label.choicetextgroup_submitted, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup .choicegroup input:hover + section.choicetextgroup_submitted, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input:hover + section.choicetextgroup_submitted { + border: 2px solid var(--submitted); } + /* line 291, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .choicegroup .field { + position: relative; } + /* line 295, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .choicegroup label { + padding: calc((var(--baseline)/2)); + padding-left: calc((var(--baseline)*2.3)); + position: relative; + font-size: var(--base-font-size); + line-height: normal; + cursor: pointer; } + /* line 305, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .choicegroup input[type="radio"], + .xmodule_display.xmodule_ProblemBlock div.problem .choicegroup input[type="checkbox"] { + left: 0.5625em; + position: absolute; + top: 0.35em; + width: calc(var(--baseline)*1.1); + height: calc(var(--baseline)*1.1); + z-index: 1; } + /* line 316, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .choicegroup legend { + margin-bottom: var(--baseline); + max-width: 100%; + white-space: normal; } + /* line 322, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .choicegroup legend + .question-description { + margin-top: calc(-1 * var(--baseline)); + max-width: 100%; + white-space: normal; } + /* line 334, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .indicator-container { + margin-left: calc((var(--baseline)*0.75)); } + /* line 337, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .indicator-container .status { + width: var(--baseline); } + /* line 55, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .indicator-container .status.correct .status-icon::after { + color: var(--correct); + font-size: 1.2em; + content: ""; } + /* line 55, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .indicator-container .status.partially-correct .status-icon::after { + color: var(--partially-correct); + font-size: 1.2em; + content: ""; } + /* line 55, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .indicator-container .status.incorrect .status-icon::after { + color: var(--incorrect); + font-size: 1.2em; + content: ""; } + /* line 358, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .indicator-container .status.submitted .status-icon, .xmodule_display.xmodule_ProblemBlock div.problem .indicator-container .status.unsubmitted .status-icon, .xmodule_display.xmodule_ProblemBlock div.problem .indicator-container .status.unanswered .status-icon { + content: ''; } + /* line 371, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem ol.enumerate li::before { + display: block; + visibility: hidden; + height: 0; + content: " "; } + /* line 381, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .solution-span > span { + margin: var(--baseline) 0; + display: block; + position: relative; } + /* line 386, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .solution-span > span:empty { + display: none; } + /* line 393, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .targeted-feedback-span > span { + display: block; + position: relative; } + /* line 397, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .targeted-feedback-span > span:empty { + display: none; } + /* line 408, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem div p.answer { + margin-top: -2px; } + /* line 412, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem div p span.clarification i { + font-style: normal; } + /* line 415, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem div p span.clarification i:hover { + color: var(--blue); } + /* line 422, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem div.correct input, .xmodule_display.xmodule_ProblemBlock div.problem div.ui-icon-check input { + border-color: var(--correct); } + /* line 428, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem div.partially-correct input, .xmodule_display.xmodule_ProblemBlock div.problem div.ui-icon-check input { + border-color: var(--partially-correct); } + /* line 434, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem div.processing input { + border-color: #aaa; } + /* line 440, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem div.ui-icon-close input { + border-color: var(--incorrect); } + /* line 446, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem div.incorrect input, .xmodule_display.xmodule_ProblemBlock div.problem div.incomplete input { + border-color: var(--incorrect); } + /* line 452, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem div.submitted input, .xmodule_display.xmodule_ProblemBlock div.problem div.ui-icon-check input { + border-color: var(--submitted); } + /* line 457, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem div p.answer { + display: inline-block; + margin-top: calc((var(--baseline) / 2)); + margin-bottom: 0; } + /* line 462, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem div p.answer::before { + display: inline; + content: "Answer: "; } + /* line 471, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem div p.answer:empty::before { + display: none; } + /* line 477, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem div div.equation { + clear: both; + margin-top: 3px; } + /* line 481, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem div div.equation .MathJax_Display { + width: auto; } + /* line 485, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem div div.equation img.loading { + padding-left: calc((var(--baseline)/2)); + display: inline-block; } + /* line 491, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem div div.equation span { + margin-bottom: 0; + display: inline-block; } + /* line 495, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem div div.equation span.MathJax_CHTML, .xmodule_display.xmodule_ProblemBlock div.problem div div.equation span.MathJax, .xmodule_display.xmodule_ProblemBlock div.problem div div.equation span.MathJax_SVG { + padding: 6px; + min-width: 30px; + border: 1px solid #e3e3e3; + border-radius: 4px; + background: #f1f1f1; } + @media print { + /* line 506, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem div [id^='display'].equation { + display: none; } } + /* line 514, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem div span.ui-icon-bullet { + display: inline-block; + position: relative; + top: 4px; + width: 14px; + height: 14px; + background: var(--icon-unanswered) center center no-repeat; } + /* line 523, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem div span.processing, .xmodule_display.xmodule_ProblemBlock div.problem div span.ui-icon-processing { + display: inline-block; + position: relative; + top: 6px; + width: 25px; + height: 20px; + background: var(--icon-spinner) center center no-repeat; } + /* line 532, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem div span.ui-icon-check { + display: inline-block; + position: relative; + top: 3px; + width: 25px; + height: 20px; + background: var(--icon-correct) center center no-repeat; } + /* line 541, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem div span.incomplete, .xmodule_display.xmodule_ProblemBlock div.problem div span.ui-icon-close { + display: inline-block; + position: relative; + top: 3px; + width: 20px; + height: 20px; + background: var(--icon-incorrect) center center no-repeat; } + /* line 551, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem div .reload { + float: right; + margin: calc((var(--baseline)/2)); } + /* line 558, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem div .grader-status { + margin: calc(var(--baseline)/2) 0; + padding: calc(var(--baseline)/2); + border-radius: 5px; + background: var(--gray-l6); } + /* line 15, /openedx/edx-platform/common/static/sass/bourbon/addons/_clearfix.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem div .grader-status:after { + content: ""; + display: table; + clear: both; } + /* line 566, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem div .grader-status span { + display: block; + float: left; + overflow: hidden; + margin: -7px 7px 0 0; + text-indent: -9999px; } + /* line 574, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem div .grader-status .grading { + margin: 0px 7px 0 0; + padding-left: 25px; + background: var(--icon-info) left center no-repeat; + text-indent: 0px; } + /* line 581, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem div .grader-status p { + float: left; + margin-bottom: 0; + text-transform: capitalize; + line-height: 20px; } + /* line 588, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem div .grader-status.file { + margin-top: var(--baseline); + padding: var(--baseline) 0 0 0; + border: 0; + border-top: 1px solid #eee; + background: var(--white); } + /* line 595, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem div .grader-status.file p.debug { + display: none; } + /* line 599, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem div .grader-status.file input { + float: left; } + /* line 607, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem div .evaluation p { + margin-bottom: calc((var(--baseline)/5)); } + /* line 613, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem div .feedback-on-feedback { + margin-right: var(--baseline); + height: 100px; } + /* line 619, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem div .evaluation-response header { + text-align: right; } + /* line 622, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem div .evaluation-response header a { + font-size: .85em; } + /* line 629, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem div .evaluation-scoring .scoring-list { + margin-left: 3px; + list-style-type: none; } + /* line 633, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem div .evaluation-scoring .scoring-list li { + display: inline; + margin-left: 50px; } + /* line 637, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem div .evaluation-scoring .scoring-list li:first-child { + margin-left: 0; } + /* line 641, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem div .evaluation-scoring .scoring-list li label { + font-size: .9em; } + /* line 648, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem div .submit-message-container { + margin: var(--baseline) 0px; } + /* line 654, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem div.inline > span { + display: inline; } + /* line 659, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem ul { + margin-bottom: lh(); + margin-left: .75em; + margin-left: .75rem; + list-style: disc outside none; } + /* line 666, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem ol { + margin-bottom: lh(); + margin-left: .75em; + margin-left: .75rem; + list-style: decimal outside none; } + /* line 673, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem dl { + line-height: 1.4em; } + /* line 682, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem dl dd { + margin-bottom: 0; } + /* line 686, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem dd { + margin-left: .5em; + margin-left: .5rem; } + /* line 691, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem li { + margin-bottom: lh(0.5); + line-height: 1.4em; } + /* line 695, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem li:last-child { + margin-bottom: 0; } + /* line 700, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem p { + margin-bottom: lh(); } + /* line 704, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem table { + margin: lh() 0; + border-collapse: collapse; + table-layout: auto; } + /* line 710, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem table td.cont-justified-left, .xmodule_display.xmodule_ProblemBlock div.problem table th.cont-justified-left { + text-align: left !important; } + /* line 714, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem table td.cont-justified-right, .xmodule_display.xmodule_ProblemBlock div.problem table th.cont-justified-right { + text-align: right !important; } + /* line 718, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem table td.cont-justified-center, .xmodule_display.xmodule_ProblemBlock div.problem table th.cont-justified-center { + text-align: center !important; } + /* line 723, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem table th { + text-align: left; } + /* line 729, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem table td { + text-align: left; } + /* line 733, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem table caption, .xmodule_display.xmodule_ProblemBlock div.problem table th, .xmodule_display.xmodule_ProblemBlock div.problem table td { + padding: .25em .75em .25em 0; + padding: .25rem .75rem .25rem 0; } + /* line 738, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem table caption { + margin-bottom: .75em; + margin-bottom: .75rem; + padding: .75em 0; + padding: .75rem 0; + background: #f1f1f1; } + /* line 746, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem table tr, .xmodule_display.xmodule_ProblemBlock div.problem table td, .xmodule_display.xmodule_ProblemBlock div.problem table th { + vertical-align: middle; } + /* line 751, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem code { + margin: 0 2px; + padding: 0px 5px; + border: 1px solid #eaeaea; + border-radius: 3px; + background-color: var(--gray-l6); + white-space: nowrap; + font-size: .9em; } + /* line 761, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem pre { + overflow: auto; + padding: 6px calc(var(--baseline)/2); + border: 1px solid var(--gray-l3); + border-radius: 3px; + background-color: var(--gray-l6); + font-size: .9em; + line-height: 1.4; } + /* line 770, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem pre > code { + margin: 0; + padding: 0; + border: none; + background: transparent; + white-space: pre; } + /* line 784, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock .problem .capa_inputtype.textline input, .xmodule_display.xmodule_ProblemBlock .problem .inputtype.formulaequationinput input { + box-sizing: border-box; + border: 2px solid var(--gray-l4); + border-radius: 3px; + min-width: 160px; + height: 46px; } + /* line 793, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock .problem .capa_inputtype.textline .status, .xmodule_display.xmodule_ProblemBlock .problem .inputtype.formulaequationinput .status { + display: inline-block; + margin-top: calc((var(--baseline)/2)); + background: none; } + /* line 801, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock .problem .capa_inputtype.textline > .incorrect input, .xmodule_display.xmodule_ProblemBlock .problem .inputtype.formulaequationinput > .incorrect input { + border: 2px solid var(--incorrect); } + /* line 55, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock .problem .capa_inputtype.textline > .incorrect .status .status-icon::after, .xmodule_display.xmodule_ProblemBlock .problem .inputtype.formulaequationinput > .incorrect .status .status-icon::after { + color: var(--incorrect); + font-size: 1.2em; + content: ""; } + /* line 812, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock .problem .capa_inputtype.textline > .partially-correct input, .xmodule_display.xmodule_ProblemBlock .problem .inputtype.formulaequationinput > .partially-correct input { + border: 2px solid var(--partially-correct); } + /* line 55, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock .problem .capa_inputtype.textline > .partially-correct .status .status-icon::after, .xmodule_display.xmodule_ProblemBlock .problem .inputtype.formulaequationinput > .partially-correct .status .status-icon::after { + color: var(--partially-correct); + font-size: 1.2em; + content: ""; } + /* line 823, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock .problem .capa_inputtype.textline > .correct input, .xmodule_display.xmodule_ProblemBlock .problem .inputtype.formulaequationinput > .correct input { + border: 2px solid var(--correct); } + /* line 55, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock .problem .capa_inputtype.textline > .correct .status .status-icon::after, .xmodule_display.xmodule_ProblemBlock .problem .inputtype.formulaequationinput > .correct .status .status-icon::after { + color: var(--correct); + font-size: 1.2em; + content: ""; } + /* line 834, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock .problem .capa_inputtype.textline > .submitted input, .xmodule_display.xmodule_ProblemBlock .problem .inputtype.formulaequationinput > .submitted input { + border: 2px solid var(--submitted); } + /* line 838, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock .problem .capa_inputtype.textline > .submitted .status, .xmodule_display.xmodule_ProblemBlock .problem .inputtype.formulaequationinput > .submitted .status { + content: ''; } + /* line 845, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock .problem .capa_inputtype.textline > .unanswered input, .xmodule_display.xmodule_ProblemBlock .problem .capa_inputtype.textline > .unsubmitted input, .xmodule_display.xmodule_ProblemBlock .problem .inputtype.formulaequationinput > .unanswered input, .xmodule_display.xmodule_ProblemBlock .problem .inputtype.formulaequationinput > .unsubmitted input { + border: 2px solid var(--gray-l4); } + /* line 851, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock .problem .capa_inputtype.textline > .unanswered .status .status-icon::after, .xmodule_display.xmodule_ProblemBlock .problem .capa_inputtype.textline > .unsubmitted .status .status-icon::after, .xmodule_display.xmodule_ProblemBlock .problem .inputtype.formulaequationinput > .unanswered .status .status-icon::after, .xmodule_display.xmodule_ProblemBlock .problem .inputtype.formulaequationinput > .unsubmitted .status .status-icon::after { + content: ''; + display: inline-block; } + /* line 863, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock .problem .inputtype.formulaequationinput > div input { + direction: ltr; + text-align: left; } + /* line 870, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock .problem .trailing_text { + margin-right: calc((var(--baseline)/2)); + display: inline-block; } + /* line 881, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock .problem .inputtype.option-input { + margin: 0 0 0 0 !important; } + /* line 884, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock .problem .inputtype.option-input .indicator-container { + display: inline-block; } + /* line 887, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock .problem .inputtype.option-input .indicator-container .status.correct::after, + .xmodule_display.xmodule_ProblemBlock .problem .inputtype.option-input .indicator-container .status.partially-correct::after, + .xmodule_display.xmodule_ProblemBlock .problem .inputtype.option-input .indicator-container .status.incorrect::after, + .xmodule_display.xmodule_ProblemBlock .problem .inputtype.option-input .indicator-container .status.submitted::after, + .xmodule_display.xmodule_ProblemBlock .problem .inputtype.option-input .indicator-container .status.unanswered::after { + margin-left: 0; } + /* line 901, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .CodeMirror { + border: 1px solid black; + font-size: 14px; + line-height: 18px; + resize: none; } + /* line 907, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .CodeMirror .cm-tab { + background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAMCAYAAAAkuj5RAAAAAXNSR0IArs4c6QAAAGFJREFUSMft1LsRQFAQheHPowAKoACx3IgEKtaEHujDjORSgWTH/ZOdnZOcM/sgk/kFFWY0qV8foQwS4MKBCS3qR6ixBJvElOobYAtivseIE120FaowJPN75GMu8j/LfMwNjh4HUpwg4LUAAAAASUVORK5CYII=); + background-position: right; + background-repeat: no-repeat; } + /* line 913, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .CodeMirror pre { + overflow: hidden; + margin: 0; + padding: 0; + border-width: 0; + border-radius: 0; + background: transparent; + white-space: pre; + word-wrap: normal; + font-size: inherit; + font-family: inherit; + resize: none; } + /* line 926, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .CodeMirror pre.CodeMirror-cursor { + position: absolute; + visibility: hidden; + width: 0; + border-right: none; + border-left: 1px solid var(--black); } + /* line 938, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .CodeMirror-focused pre.CodeMirror-cursor { + visibility: visible; } + /* line 942, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .CodeMirror-code pre { + width: -webkit-fit-content; + width: -moz-fit-content; + width: fit-content; } + /* line 948, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .CodeMirror-scroll { + margin-right: 0px; } + /* line 953, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock .capa-message { + display: inline-block; + color: var(--gray-d1); + -webkit-font-smoothing: antialiased; } + /* line 961, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .action { + min-height: var(--baseline); + width: 100%; + display: flex; + display: -ms-flexbox; + -ms-flex-align: start; + flex-direction: row; + align-items: center; + flex-wrap: wrap; } + /* line 971, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .action .problem-action-buttons-wrapper { + display: inline-flex; + justify-content: flex-end; + width: 100%; + padding-bottom: var(--baseline); } + /* line 978, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .action .problem-action-button-wrapper { + border-right: 1px solid var(--gray-300); + padding: 0 13px; + display: inline-block; } + /* line 984, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .action .problem-action-button-wrapper:last-child { + border: none; + padding-right: 0; } + /* line 990, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .action .problem-action-btn { + border: none; + max-width: 110px; } + /* line 994, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .action .problem-action-btn:hover, .xmodule_display.xmodule_ProblemBlock div.problem .action .problem-action-btn:focus, .xmodule_display.xmodule_ProblemBlock div.problem .action .problem-action-btn:active { + color: var(--primary) !important; } + /* line 1000, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .action .problem-action-btn .icon { + margin-bottom: calc(var(--baseline) / 10); + display: block; } + @media print { + /* line 990, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .action .problem-action-btn { + display: none; } } + /* line 1010, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .action .submit-attempt-container { + padding-bottom: var(--baseline); + flex-grow: 1; + display: flex; + align-items: center; } + @media (max-width: var(--bp-screen-lg)) { + /* line 1010, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .action .submit-attempt-container { + max-width: 100%; + padding-bottom: var(--baseline); } } + /* line 1021, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .action .submit-attempt-container .submit { + margin-right: calc((var(--baseline) / 2)); + float: left; + white-space: nowrap; } + /* line 1028, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .action .submit-attempt-container .submit-cta-description { + color: var(--primary); + font-size: small; + padding-right: calc(var(--baseline) / 2); } + /* line 1033, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .action .submit-attempt-container .submit-cta-link-button { + color: var(--primary); + padding-right: calc(var(--baseline) / 4); } + /* line 1039, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .action .submission-feedback { + margin-right: calc((var(--baseline) / 2)); + margin-top: calc(var(--baseline) / 2); + display: inline-block; + color: var(--gray-d1); + font-size: var(--medium-font-size); + -webkit-font-smoothing: antialiased; + vertical-align: middle; } + /* line 1049, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .action .submission-feedback.cta-enabled { + margin-top: 0; } + /* line 1059, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem hr { + float: none; + clear: both; + margin: 0 0 .75rem; + width: 100%; + height: 1px; + border: none; + background: #ddd; + color: #ddd; } + /* line 1070, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .hidden { + display: none; + visibility: hidden; } + /* line 1075, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem input[type="email"], .xmodule_display.xmodule_ProblemBlock div.problem input[type="number"], .xmodule_display.xmodule_ProblemBlock div.problem input[type="password"], .xmodule_display.xmodule_ProblemBlock div.problem input[type="search"], .xmodule_display.xmodule_ProblemBlock div.problem input[type="tel"], .xmodule_display.xmodule_ProblemBlock div.problem input[type="text"], .xmodule_display.xmodule_ProblemBlock div.problem input[type="url"], .xmodule_display.xmodule_ProblemBlock div.problem input[type="color"], .xmodule_display.xmodule_ProblemBlock div.problem input[type="date"], .xmodule_display.xmodule_ProblemBlock div.problem input[type="datetime"], .xmodule_display.xmodule_ProblemBlock div.problem input[type="datetime-local"], .xmodule_display.xmodule_ProblemBlock div.problem input[type="month"], .xmodule_display.xmodule_ProblemBlock div.problem input[type="time"], .xmodule_display.xmodule_ProblemBlock div.problem input[type="week"] { + display: inline; + width: auto; } + /* line 1081, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem center { + display: block; + margin: lh() 0; + padding: lh(); + border: 1px solid var(--gray-l3); } + /* line 1088, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .message { + font-size: inherit; } + /* line 1092, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .detailed-solution > p { + margin: 0; } + /* line 1095, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .detailed-solution > p:first-child { + margin-bottom: 0; } + /* line 1106, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .detailed-targeted-feedback > p, + .xmodule_display.xmodule_ProblemBlock div.problem .detailed-targeted-feedback-partially-correct > p, + .xmodule_display.xmodule_ProblemBlock div.problem .detailed-targeted-feedback-correct > p { + margin: 0; + font-weight: normal; } + /* line 1116, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem div.capa_alert { + margin-top: var(--baseline); + padding: 8px 12px; + border: 1px solid var(--warning-color); + border-radius: 3px; + background: var(--warning-color-accent); + font-size: 0.9em; } + /* line 1125, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .notification { + float: left; + margin-top: calc(var(--baseline) / 2); + padding: calc((var(--baseline) / 2.5)) calc((var(--baseline) / 2)) calc((var(--baseline) / 5)) calc((var(--baseline) / 2)); + line-height: var(--base-line-height); } + /* line 1132, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .notification.success { + border-top: 3px solid var(--success); } + /* line 239, common/static/sass/edx-pattern-library-shims/base/_variables.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .notification.success .icon { + margin-right: 15px; + color: var(--success); } + /* line 1136, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .notification.error { + border-top: 3px solid var(--danger); } + /* line 239, common/static/sass/edx-pattern-library-shims/base/_variables.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .notification.error .icon { + margin-right: 15px; + color: var(--danger); } + /* line 1140, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .notification.warning { + border-top: 3px solid var(--warning); } + /* line 239, common/static/sass/edx-pattern-library-shims/base/_variables.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .notification.warning .icon { + margin-right: 15px; + color: var(--warning); } + /* line 1144, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .notification.general { + border-top: 3px solid var(--general-color-accent); } + /* line 239, common/static/sass/edx-pattern-library-shims/base/_variables.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .notification.general .icon { + margin-right: 15px; + color: var(--general-color-accent); } + /* line 1148, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .notification.problem-hint { + border: 1px solid var(--uxpl-gray-background); + border-radius: 6px; } + /* line 1152, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .notification.problem-hint .icon { + margin-right: calc(3 * var(--baseline) / 4); + color: var(--uxpl-gray-dark); } + /* line 1158, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .notification.problem-hint li { + color: var(--uxpl-gray-base); } + /* line 1161, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .notification.problem-hint li strong { + color: var(--uxpl-gray-dark); } + /* line 1167, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .notification .icon { + float: left; + position: relative; + top: calc(var(--baseline) / 5); } + /* line 1174, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .notification .notification-message { + display: inline-block; + width: 69.38776%; + margin-bottom: 8px; } + /* line 1181, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .notification .notification-message ol { + list-style: none outside none; + padding: 0; + margin: 0; } + /* line 1186, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .notification .notification-message ol li:not(:last-child) { + margin-bottom: calc(var(--baseline) / 4); } + /* line 1192, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .notification .notification-btn-wrapper { + float: right; } + /* line 1198, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .notification-btn { + float: right; + padding: calc((var(--baseline) / 10)) calc((var(--baseline) / 4)); + min-width: calc((var(--baseline) * 3)); + display: block; + clear: both; } + /* line 1206, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .notification-btn:first-child { + margin-bottom: calc(var(--baseline) / 4); } + /* line 1213, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem button:hover { + background-image: none; + box-shadow: none; } + /* line 1218, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem button:focus { + box-shadow: none; } + /* line 1222, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem button.btn-default { + background-color: transparent; } + /* line 1227, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem button.btn-brand:hover { + background-color: var(--btn-brand-focus-background); } + /* line 1233, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .review-btn { + color: var(--blue); } + /* line 1235, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .review-btn.sr { + color: var(--blue); } + /* line 1240, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem div.capa_reset { + padding: 25px; + background-color: var(--error-color-light); + border: 1px solid var(--error-color); + border-radius: 3px; + font-size: 1em; + margin-top: calc(var(--baseline)/2); + margin-bottom: calc(var(--baseline)/2); } + /* line 1250, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .capa_reset > h2 { + color: #a00; } + /* line 1254, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .capa_reset li { + font-size: 0.9em; } + /* line 1258, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .hints { + border: 1px solid var(--gray-l3); } + /* line 1261, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .hints h3 { + padding: 9px; + border-bottom: 1px solid #e3e3e3; + background: #eee; + text-shadow: 0 1px 0 var(--white); + font-size: 1em; } + /* line 1271, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .hints div { + border-bottom: 1px solid #ddd; } + /* line 1274, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .hints div:last-child { + border-bottom: none; } + /* line 1278, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .hints div p { + margin-bottom: 0; } + /* line 1283, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .hints div header a { + display: block; + padding: 9px; + background: var(--gray-l6); + box-shadow: inset 0 0 0 1px var(--white); } + /* line 1291, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .hints div > section { + padding: 9px; } + /* line 1297, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .test { + padding-top: 18px; } + /* line 1300, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .test header { + margin-bottom: 12px; } + /* line 1303, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .test header h3 { + color: #aaa; + font-style: normal; + font-size: 0.9em; } + /* line 1312, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .test > section { + position: relative; + margin-bottom: calc((var(--baseline)/2)); + padding: 9px 9px var(--baseline); + border: 1px solid #ddd; + border-radius: 3px; + background: var(--white); + box-shadow: inset 0 0 0 1px #eee; } + /* line 1321, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .test > section p:last-of-type { + margin-bottom: 0; } + /* line 1325, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .test > section .shortform { + margin-bottom: .6em; } + /* line 1329, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .test > section a.full { + position: absolute; + top: 0; + right: 0; + bottom: 1px; + left: 0; + box-sizing: border-box; + display: block; + padding: calc((var(--baseline)/5)); + background: var(--gray-l4); + text-align: right; + font-size: 1em; } + /* line 1339, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .test > section a.full.full-top { + position: absolute; + top: 1px; + right: 0; + bottom: auto; + left: 0; } + /* line 1343, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .test > section a.full.full-bottom { + position: absolute; + top: auto; + right: 0; + bottom: 1px; + left: 0; } + /* line 1351, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .external-grader-message section { + padding-top: calc((var(--baseline)*1.5)); + padding-left: var(--baseline); + background-color: #fafafa; + color: #2c2c2c; + font-size: 1em; + font-family: monospace; } + /* line 1359, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .external-grader-message section header { + font-size: 1.4em; } + /* line 1367, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .external-grader-message section .longform { + margin: 0; + padding: 0; } + /* line 1371, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .external-grader-message section .longform .result-errors { + margin: calc((var(--baseline)/4)); + padding: calc((var(--baseline)/2)) calc((var(--baseline)/2)) calc((var(--baseline)/2)) calc((var(--baseline)*2)); + background: var(--icon-incorrect) center left no-repeat; } + /* line 1376, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .external-grader-message section .longform .result-errors li { + color: #b00; } + /* line 1381, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .external-grader-message section .longform .result-output { + margin: calc(var(--baseline)/4); + padding: var(--baseline) 0 calc((var(--baseline)*0.75)) 50px; + border-top: 1px solid #ddd; + border-left: var(--baseline) solid #fafafa; } + /* line 1387, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .external-grader-message section .longform .result-output h4 { + font-size: 1em; + font-family: monospace; } + /* line 1392, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .external-grader-message section .longform .result-output dl { + margin: 0; } + /* line 1396, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .external-grader-message section .longform .result-output dt { + margin-top: var(--baseline); } + /* line 1400, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .external-grader-message section .longform .result-output dd { + margin-left: 24pt; } + /* line 1405, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .external-grader-message section .longform .result-correct { + background: var(--icon-correct) left 20px no-repeat; } + /* line 1408, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .external-grader-message section .longform .result-correct .result-actual-output { + color: #090; } + /* line 1413, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .external-grader-message section .longform .result-partially-correct { + background: var(--icon-partially-correct) left 20px no-repeat; } + /* line 1416, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .external-grader-message section .longform .result-partially-correct .result-actual-output { + color: #090; } + /* line 1421, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .external-grader-message section .longform .result-incorrect { + background: var(--icon-incorrect) left 20px no-repeat; } + /* line 1424, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .external-grader-message section .longform .result-incorrect .result-actual-output { + color: #b00; } + /* line 1429, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .external-grader-message section .longform .markup-text { + margin: calc((var(--baseline)/4)); + padding: var(--baseline) 0 15px 50px; + border-top: 1px solid #ddd; + border-left: 20px solid #fafafa; } + /* line 1435, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .external-grader-message section .longform .markup-text bs { + color: #b00; } + /* line 1439, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .external-grader-message section .longform .markup-text bg { + color: #bda046; } + /* line 1453, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .rubric tr { + margin: calc((var(--baseline)/2)) 0; + height: 100%; } + /* line 1458, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .rubric td { + margin: calc((var(--baseline)/2)) 0; + padding: var(--baseline) 0; + height: 100%; } + /* line 1464, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .rubric th { + margin: calc((var(--baseline)/4)); + padding: calc((var(--baseline)/4)); } + /* line 1469, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .rubric label, + .xmodule_display.xmodule_ProblemBlock div.problem .rubric .view-only { + position: relative; + display: inline-block; + margin: 3px; + padding: calc((var(--baseline)*0.75)); + min-width: 50px; + min-height: 50px; + width: 150px; + height: 100%; + background-color: var(--gray-l3); + font-size: .9em; } + /* line 1483, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .rubric .grade { + position: absolute; + right: 0; + bottom: 0; + margin: calc((var(--baseline)/2)); } + /* line 1490, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .rubric .selected-grade { + background: #666; + color: white; } + /* line 1495, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .rubric input[type=radio]:checked + label { + background: #666; + color: white; } + /* line 1500, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .rubric input[class='score-selection'] { + display: none; } + /* line 1509, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .annotation-input { + margin: 0 0 1em 0; + border: 1px solid var(--gray-l3); + border-radius: 1em; + /* for debugging the input value field. enable the debug flag on the inputtype */ } + /* line 1514, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .annotation-input .annotation-header { + padding: .5em 1em; + border-bottom: 1px solid var(--gray-l3); } + /* line 1521, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .annotation-input .annotation-body { + padding: .5em 1em; } + /* line 1523, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .annotation-input a.annotation-return { + float: right; + font: inherit; + font-weight: normal; } + /* line 1529, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .annotation-input a.annotation-return::after { + content: " \2191"; } + /* line 1531, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .annotation-input .block, .xmodule_display.xmodule_ProblemBlock div.problem .annotation-input ul.tags { + margin: .5em 0; + padding: 0; } + /* line 1536, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .annotation-input .block-highlight { + padding: .5em; + border: 1px solid rgba(214, 214, 0, 0.3); + background-color: rgba(255, 255, 10, 0.3); + color: #333; + font-style: normal; } + /* line 1544, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .annotation-input .block-comment { + font-style: italic; } + /* line 1546, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .annotation-input ul.tags { + display: block; + margin-left: 1em; + list-style-type: none; } + /* line 1551, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .annotation-input ul.tags li { + position: relative; + display: block; + margin: 1em 0 0 0; } + /* line 1556, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .annotation-input ul.tags li .tag { + display: inline-block; + margin-left: calc((var(--baseline)*2)); + border: 1px solid #666666; } + /* line 1563, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .annotation-input ul.tags li .tag.selected { + background-color: rgba(255, 255, 10, 0.3); } + /* line 1568, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .annotation-input ul.tags li .tag-status { + position: absolute; + left: 0; } + /* line 1572, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .annotation-input ul.tags li .tag-status, .xmodule_display.xmodule_ProblemBlock div.problem .annotation-input ul.tags li .tag { + padding: .25em .5em; } + /* line 1576, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .annotation-input textarea.comment { + padding: 0.2em 0.4em; + width: 100%; + height: 7.2em; + line-height: 1.4em; } + /* line 1587, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .annotation-input .answer-annotation { + display: block; + margin: 0; } + /* line 1590, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .annotation-input .debug-value { + margin: 1em 0; + padding: 1em; + border: 1px solid var(--black); + background-color: #999; + color: var(--white); } + /* line 1597, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .annotation-input .debug-value input[type="text"] { + width: 100%; } + /* line 1599, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .annotation-input .debug-value pre { + background-color: var(--gray-l3); + color: var(--black); } + /* line 1601, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .annotation-input .debug-value::before { + display: block; + content: "debug input value"; + font-size: 1.5em; } + /* line 1618, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input[type="text"] { + margin-bottom: 0.5em; } + /* line 1625, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup label.choicetextgroup_correct input[type="text"], .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup section.choicetextgroup_correct input[type="text"] { + border-color: var(--correct); } + /* line 1633, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup label.choicetextgroup_partially-correct input[type="text"], .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup section.choicetextgroup_partially-correct input[type="text"] { + border-color: var(--partially-correct); } + /* line 1647, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup label.choicetextgroup_show_correct::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup section.choicetextgroup_show_correct::after { + margin-left: calc((var(--baseline)*0.75)); + content: var(--icon-correct); } + /* line 1654, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup span.mock_label { + cursor: default; } + /* line 1665, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .imageinput.capa_inputtype .status { + display: inline-block; + position: relative; + top: 3px; + width: 25px; + height: 20px; } + /* line 1674, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .imageinput.capa_inputtype .status.unsubmitted .status-icon, .xmodule_display.xmodule_ProblemBlock div.problem .imageinput.capa_inputtype .status.unanswered .status-icon { + content: ''; } + /* line 1678, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .imageinput.capa_inputtype .status.unsubmitted .status-message, .xmodule_display.xmodule_ProblemBlock div.problem .imageinput.capa_inputtype .status.unanswered .status-message { + display: none; } + /* line 55, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .imageinput.capa_inputtype .correct .status-icon::after { + color: var(--correct); + font-size: 1.2em; + content: ""; } + /* line 55, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .imageinput.capa_inputtype .incorrect .status-icon::after { + color: var(--incorrect); + font-size: 1.2em; + content: ""; } + /* line 55, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .imageinput.capa_inputtype .partially-correct .status-icon::after { + color: var(--partially-correct); + font-size: 1.2em; + content: ""; } + /* line 1696, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .imageinput.capa_inputtype .submitted { + content: ''; } + /* line 1706, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .annotation-input .tag-status { + display: inline-block; + position: relative; + top: 3px; + width: 25px; + height: 20px; } + /* line 1715, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .annotation-input .tag-status.unsubmitted .status-icon, .xmodule_display.xmodule_ProblemBlock div.problem .annotation-input .tag-status.unanswered .status-icon { + content: ''; } + /* line 1719, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .annotation-input .tag-status.unsubmitted .status-message, .xmodule_display.xmodule_ProblemBlock div.problem .annotation-input .tag-status.unanswered .status-message { + display: none; } + /* line 55, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .annotation-input .correct .status-icon::after { + color: var(--correct); + font-size: 1.2em; + content: ""; } + /* line 55, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .annotation-input .incorrect .status-icon::after { + color: var(--incorrect); + font-size: 1.2em; + content: ""; } + /* line 55, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .annotation-input .partially-correct .status-icon::after { + color: var(--partially-correct); + font-size: 1.2em; + content: ""; } + /* line 1737, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock div.problem .annotation-input .submitted { + content: ''; } + /* line 1744, /openedx/edx-platform/xmodule/assets/capa/_display.scss */ + .xmodule_display.xmodule_ProblemBlock .problems-wrapper .loading-spinner { + text-align: center; + color: var(--gray-d1); } diff --git a/xmodule/assets/ProblemBlockDisplay.scss b/xmodule/assets/ProblemBlockDisplay.scss deleted file mode 100644 index 5175529246b0..000000000000 --- a/xmodule/assets/ProblemBlockDisplay.scss +++ /dev/null @@ -1,3 +0,0 @@ -.xmodule_display.xmodule_ProblemBlock { - @import "capa/display.scss"; -} diff --git a/xmodule/assets/ProblemBlockEditor.css b/xmodule/assets/ProblemBlockEditor.css new file mode 100644 index 000000000000..ea93131f7a6f --- /dev/null +++ b/xmodule/assets/ProblemBlockEditor.css @@ -0,0 +1,185 @@ +@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,700"); +/* line 1, /openedx/edx-platform/xmodule/assets/ProblemBlockEditor.scss */ +.xmodule_edit.xmodule_ProblemBlock { } + /* line 123, common/static/sass/_mixins.scss */ + .xmodule_edit.xmodule_ProblemBlock .ui-col-wide { + width: 74.46809%; + margin-right: 2.12766%; + float: left; } + /* line 130, common/static/sass/_mixins.scss */ + .xmodule_edit.xmodule_ProblemBlock .ui-col-narrow { + width: 23.40426%; + float: left; } + /* line 342, common/static/sass/_mixins.scss */ + .xmodule_edit.xmodule_ProblemBlock .ui-loading { + box-shadow: inset 0 1px 2px 1px rgba(0, 0, 0, 0.2); + padding: 15px 20px; } + /* line 368, common/static/sass/_mixins.scss */ + .xmodule_edit.xmodule_ProblemBlock .ui-loading { + animation: fadeIn 0.25s linear 1; + opacity: 0.6; + background-color: #fff; + padding: 30px 20px; + text-align: center; } + /* line 379, common/static/sass/_mixins.scss */ + .xmodule_edit.xmodule_ProblemBlock .ui-loading .spin { + display: inline-block; } + /* line 385, common/static/sass/_mixins.scss */ + .xmodule_edit.xmodule_ProblemBlock .ui-loading .copy { + padding-left: 5px; } + /* line 390, common/static/sass/_mixins.scss */ + .xmodule_edit.xmodule_ProblemBlock .is-hidden { + display: none; } + /* line 9, /openedx/edx-platform/xmodule/assets/editor/_edit.scss */ + .xmodule_edit.xmodule_ProblemBlock .editor { + position: relative; } + /* line 12, /openedx/edx-platform/xmodule/assets/editor/_edit.scss */ + .xmodule_edit.xmodule_ProblemBlock .editor .row { + position: relative; } + /* line 16, /openedx/edx-platform/xmodule/assets/editor/_edit.scss */ + .xmodule_edit.xmodule_ProblemBlock .editor .editor-bar { + background-color: #d4dee8; + background-image: -webkit-linear-gradient(top, #d4dee8, #c9d5e2); + background-image: linear-gradient(to bottom,#d4dee8, #c9d5e2); + position: relative; + padding: calc((var(--baseline)/4)); + border-bottom-color: #a5aaaf; } + /* line 15, /openedx/edx-platform/common/static/sass/bourbon/addons/_clearfix.scss */ + .xmodule_edit.xmodule_ProblemBlock .editor .editor-bar:after { + content: ""; + display: table; + clear: both; } + /* line 24, /openedx/edx-platform/xmodule/assets/editor/_edit.scss */ + .xmodule_edit.xmodule_ProblemBlock .editor .editor-bar button { + display: inline-block; + float: left; + padding: 3px calc((var(--baseline)/2)) 5px; + margin-left: 7px; + border: 0; + border-radius: 2px; + background: transparent; } + /* line 35, /openedx/edx-platform/xmodule/assets/editor/_edit.scss */ + .xmodule_edit.xmodule_ProblemBlock .editor .editor-bar button .icon { + height: 21px; } + /* line 39, /openedx/edx-platform/xmodule/assets/editor/_edit.scss */ + .xmodule_edit.xmodule_ProblemBlock .editor .editor-bar button:hover, .xmodule_edit.xmodule_ProblemBlock .editor .editor-bar button:focus { + background: rgba(255, 255, 255, 0.5); } + /* line 46, /openedx/edx-platform/xmodule/assets/editor/_edit.scss */ + .xmodule_edit.xmodule_ProblemBlock .editor .editor-tabs { + position: absolute; + top: 10px; + right: 10px; + text-align: left; + direction: ltr; } + /* line 54, /openedx/edx-platform/xmodule/assets/editor/_edit.scss */ + .xmodule_edit.xmodule_ProblemBlock .editor .editor-tabs li { + float: left; + margin-right: calc((var(--baseline)/4)); } + /* line 58, /openedx/edx-platform/xmodule/assets/editor/_edit.scss */ + .xmodule_edit.xmodule_ProblemBlock .editor .editor-tabs li:last-child { + margin-right: 0; } + /* line 63, /openedx/edx-platform/xmodule/assets/editor/_edit.scss */ + .xmodule_edit.xmodule_ProblemBlock .editor .editor-tabs .tab { + display: block; + height: 24px; + padding: 7px 20px 3px; + border: 1px solid #a5aaaf; + border-radius: 3px 3px 0 0; + background-color: var(--transparent); + background-image: -webkit-linear-gradient(top, var(--transparent) 87%, rgba(0, 0, 0, 0.06)); + background-image: linear-gradient(to bottom,var(--transparent) 87%, rgba(0, 0, 0, 0.06)); + background-color: #e5ecf3; + font-size: 13px; + color: #3c3c3c; + box-shadow: 1px -1px 1px rgba(0, 0, 0, 0.05); } + /* line 77, /openedx/edx-platform/xmodule/assets/editor/_edit.scss */ + .xmodule_edit.xmodule_ProblemBlock .editor .editor-tabs .tab.current { + background: var(--white); + border-bottom-color: var(--white); } + /* line 3, /openedx/edx-platform/xmodule/assets/problem/_edit.scss */ + .xmodule_edit.xmodule_ProblemBlock .editor-bar .editor-tabs .advanced-toggle { + height: auto; + margin-top: -4px; + padding: 3px 9px; + font-size: 12px; + color: var(--link-color); } + /* line 10, /openedx/edx-platform/xmodule/assets/problem/_edit.scss */ + .xmodule_edit.xmodule_ProblemBlock .editor-bar .editor-tabs .advanced-toggle.current { + border: 1px solid var(--lightGrey) !important; + border-radius: 3px !important; + background: var(--lightGrey) !important; + color: var(--darkGrey) !important; + pointer-events: none; + cursor: none; } + /* line 18, /openedx/edx-platform/xmodule/assets/problem/_edit.scss */ + .xmodule_edit.xmodule_ProblemBlock .editor-bar .editor-tabs .advanced-toggle.current:hover, .xmodule_edit.xmodule_ProblemBlock .editor-bar .editor-tabs .advanced-toggle.current:focus { + box-shadow: 0 0 0 0 !important; + background-color: var(--white); } + /* line 29, /openedx/edx-platform/xmodule/assets/problem/_edit.scss */ + .xmodule_edit.xmodule_ProblemBlock .simple-editor-cheatsheet { + position: absolute; + top: 41px; + left: 70%; + width: 0; + border-left: 1px solid var(--gray-l2); + background-color: var(--lightGrey); + overflow: hidden; } + /* line 39, /openedx/edx-platform/xmodule/assets/problem/_edit.scss */ + .xmodule_edit.xmodule_ProblemBlock .simple-editor-cheatsheet.shown { + width: 30%; + height: 92%; + overflow-y: scroll; } + /* line 45, /openedx/edx-platform/xmodule/assets/problem/_edit.scss */ + .xmodule_edit.xmodule_ProblemBlock .simple-editor-cheatsheet .cheatsheet-wrapper { + padding: 5%; } + /* line 49, /openedx/edx-platform/xmodule/assets/problem/_edit.scss */ + .xmodule_edit.xmodule_ProblemBlock .simple-editor-cheatsheet h6 { + margin-top: 4px; + margin-bottom: 7px; + margin-left: 4px; + font-size: 15px; + font-weight: 700; + display: inline-block; + vertical-align: top; } + /* line 59, /openedx/edx-platform/xmodule/assets/problem/_edit.scss */ + .xmodule_edit.xmodule_ProblemBlock .simple-editor-cheatsheet .row { + padding-bottom: 5px !important; + margin-bottom: 10px !important; + border-bottom: 1px solid #ddd !important; } + /* line 15, /openedx/edx-platform/common/static/sass/bourbon/addons/_clearfix.scss */ + .xmodule_edit.xmodule_ProblemBlock .simple-editor-cheatsheet .row:after { + content: ""; + display: table; + clear: both; } + /* line 66, /openedx/edx-platform/xmodule/assets/problem/_edit.scss */ + .xmodule_edit.xmodule_ProblemBlock .simple-editor-cheatsheet .row:last-child { + border-bottom: none !important; + margin-bottom: 0 !important; } + /* line 72, /openedx/edx-platform/xmodule/assets/problem/_edit.scss */ + .xmodule_edit.xmodule_ProblemBlock .simple-editor-cheatsheet .col { + display: block; } + /* line 75, /openedx/edx-platform/xmodule/assets/problem/_edit.scss */ + .xmodule_edit.xmodule_ProblemBlock .simple-editor-cheatsheet .col.sample { + margin-right: 30px; } + /* line 78, /openedx/edx-platform/xmodule/assets/problem/_edit.scss */ + .xmodule_edit.xmodule_ProblemBlock .simple-editor-cheatsheet .col.sample .icon { + height: calc((var(--baseline) * 1.5)); } + /* line 84, /openedx/edx-platform/xmodule/assets/problem/_edit.scss */ + .xmodule_edit.xmodule_ProblemBlock .simple-editor-cheatsheet pre { + font-size: 12px; + line-height: 18px; } + /* line 89, /openedx/edx-platform/xmodule/assets/problem/_edit.scss */ + .xmodule_edit.xmodule_ProblemBlock .simple-editor-cheatsheet code { + padding: 0; + background: none; } + /* line 97, /openedx/edx-platform/xmodule/assets/problem/_edit.scss */ + .xmodule_edit.xmodule_ProblemBlock .problem-editor .markdown-box + .CodeMirror { + padding: 10px; + width: 69%; } + /* line 103, /openedx/edx-platform/xmodule/assets/problem/_edit.scss */ + .xmodule_edit.xmodule_ProblemBlock .problem-editor-icon { + display: inline-block; + width: 26px; + height: 21px; + vertical-align: middle; + color: var(--body-color); } diff --git a/xmodule/assets/ProblemBlockEditor.scss b/xmodule/assets/ProblemBlockEditor.scss deleted file mode 100644 index 03d3cf1e2a98..000000000000 --- a/xmodule/assets/ProblemBlockEditor.scss +++ /dev/null @@ -1,4 +0,0 @@ -.xmodule_edit.xmodule_ProblemBlock { - @import "editor/edit.scss"; - @import "problem/edit.scss"; -} diff --git a/xmodule/assets/README.rst b/xmodule/assets/README.rst index a697915db835..9738b1dac39f 100644 --- a/xmodule/assets/README.rst +++ b/xmodule/assets/README.rst @@ -24,27 +24,19 @@ However, we are proactively working towards a system where: * Each XBlock's assets are contained within their own folder as much as possible. See ``./vertical`` as an example. -Themable Sass (.scss) +Themable CSS (.css) ********************* -XBlock CSS for ``student_view``, ``author_view``, and ``public_view`` is compiled from the various ``./BlockDisplay.scss`` modules, such as `AnnotatableBlockDisplay.scss`_. +The CSS for an XBlock's ``student_view``, ``author_view``, and ``public_view`` +is located in the ``xmodule/assets`` directory and follows the naming +convention ``BlockDisplay.css``. -XBlock CSS for ``studio_view`` is compiled from the various ``./BlockEditor.scss`` modules, such as `AnnotatableBlockEditor.scss`_. +The CSS for an XBlock's ``studio_view`` is also located in the +``xmodule/assets`` directory and follows the naming convention +``BlockEditor.css``. -Those Sass modules are mostly thin wrappers around the underscore-prefixed Sass -modules within block-type-subdirectories, such as `annotatable/_display.css`. In the -future, we may `simplify things`_ by collapsing the top-level Sass modules and -just directly compiling the block-type-subdirectories' Sass. - -The CSS is compiled into the static folders of both LMS and CMS, as well as into -the corresponding folders in any enabled themes, as part of the edx-platform build. -It is collected into the static root, and then linked to from XBlock fragments by the -``add_sass_to_fragment`` function in `builtin_assets.py`_. - -.. _AnnotatableBlockDisplay.scss: https://github.com/openedx/edx-platform/tree/master/xmodule/assets/AnnotatableBlockDisplay.scss -.. _AnnotatableBlockEditor.scss: https://github.com/openedx/edx-platform/tree/master/xmodule/assets/AnnotatableBlockEditor.scss -.. _annotatable/_display.scss: https://github.com/openedx/edx-platform/tree/master/xmodule/assets/annotatable/_display.scss -.. _simplify things: https://github.com/openedx/edx-platform/issues/32621 +These css files can be linked to Xblock via ``add_css_url`` or ``add_css`` +methods in ``Fragment`` class from `fragment.py`_ module. JavaScript (.js) @@ -80,7 +72,6 @@ As part of an `active build refactoring`_, we will soon consolidate all edx-plat .. _LibraryContentBlock: https://github.com/openedx/edx-platform/blob/master/xmodule/library_content_block.py .. _active build refactoring: https://github.com/openedx/edx-platform/issues/31624 .. _builtin_assets.py: https://github.com/openedx/edx-platform/tree/master/xmodule/util/builtin_assets.py -.. _static_content.py: https://github.com/openedx/edx-platform/blob/master/xmodule/static_content.py -.. _library_source_block/style.css: https://github.com/openedx/edx-platform/blob/master/xmodule/assets/library_source_block/style.css +.. _fragment.py: https://github.com/openedx/web-fragments/blob/master/web_fragments/fragment.py .. _webpack.builtinblocks.config.js: https://github.com/openedx/edx-platform/blob/master/webpack.builtinblocks.config.js .. _webpack.common.config.js: https://github.com/openedx/edx-platform/blob/master/webpack.common.config.js diff --git a/xmodule/assets/SequenceBlockDisplay.css b/xmodule/assets/SequenceBlockDisplay.css new file mode 100644 index 000000000000..e9ba30d2f7db --- /dev/null +++ b/xmodule/assets/SequenceBlockDisplay.css @@ -0,0 +1,284 @@ +@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,700"); +/* line 1, /openedx/edx-platform/xmodule/assets/SequenceBlockDisplay.scss */ +.xmodule_display.xmodule_SequenceBlock { + /* stylelint-disable-line */ + /* stylelint-disable-line */ } + /* line 17, /openedx/edx-platform/xmodule/assets/sequence/_display.scss */ + .xmodule_display.xmodule_SequenceBlock .block-link { + border-left: 1px solid var(--border-color); + display: block; } + /* line 22, /openedx/edx-platform/xmodule/assets/sequence/_display.scss */ + .xmodule_display.xmodule_SequenceBlock .block-link:hover, .xmodule_display.xmodule_SequenceBlock .block-link:focus { + background: none; } + /* line 28, /openedx/edx-platform/xmodule/assets/sequence/_display.scss */ + .xmodule_display.xmodule_SequenceBlock .topbar, .xmodule_display.xmodule_SequenceBlock .sequence-nav { + border-bottom: 1px solid var(--border-color); } + /* line 15, /openedx/edx-platform/common/static/sass/bourbon/addons/_clearfix.scss */ + .xmodule_display.xmodule_SequenceBlock .topbar:after, .xmodule_display.xmodule_SequenceBlock .sequence-nav:after { + content: ""; + display: table; + clear: both; } + @media print { + /* line 28, /openedx/edx-platform/xmodule/assets/sequence/_display.scss */ + .xmodule_display.xmodule_SequenceBlock .topbar, .xmodule_display.xmodule_SequenceBlock .sequence-nav { + display: none; } } + /* line 38, /openedx/edx-platform/xmodule/assets/sequence/_display.scss */ + .xmodule_display.xmodule_SequenceBlock .topbar a.block-link, .xmodule_display.xmodule_SequenceBlock .sequence-nav a.block-link { + border-left: 1px solid var(--border-color); + display: block; } + /* line 43, /openedx/edx-platform/xmodule/assets/sequence/_display.scss */ + .xmodule_display.xmodule_SequenceBlock .topbar a.block-link:hover, .xmodule_display.xmodule_SequenceBlock .sequence-nav a.block-link:hover, .xmodule_display.xmodule_SequenceBlock .topbar a.block-link:focus, .xmodule_display.xmodule_SequenceBlock .sequence-nav a.block-link:focus { + background: none; } + /* line 51, /openedx/edx-platform/xmodule/assets/sequence/_display.scss */ + .xmodule_display.xmodule_SequenceBlock .sequence-nav ol li button { + background-color: transparent; + background-image: none; + background-position: center 14px; + background-repeat: no-repeat; + border: none; + border-radius: 0; + background-clip: border-box; + box-shadow: none; + box-sizing: content-box; + font-family: inherit; + font-size: inherit; + font-weight: inherit; } + /* line 69, /openedx/edx-platform/xmodule/assets/sequence/_display.scss */ + .xmodule_display.xmodule_SequenceBlock .sequence-nav { + margin: 0 auto var(--baseline); + position: relative; + border-bottom: none; + z-index: 0; + height: 50px; + display: flex; + justify-content: center; } + @media print { + /* line 69, /openedx/edx-platform/xmodule/assets/sequence/_display.scss */ + .xmodule_display.xmodule_SequenceBlock .sequence-nav { + display: none; } } + /* line 84, /openedx/edx-platform/xmodule/assets/sequence/_display.scss */ + .xmodule_display.xmodule_SequenceBlock .sequence-nav .sequence-list-wrapper { + position: relative; + height: 100%; + flex-grow: 1; } + @media (max-width: 575.98px) { + /* line 84, /openedx/edx-platform/xmodule/assets/sequence/_display.scss */ + .xmodule_display.xmodule_SequenceBlock .sequence-nav .sequence-list-wrapper { + white-space: nowrap; + overflow-x: scroll; } } + /* line 97, /openedx/edx-platform/xmodule/assets/sequence/_display.scss */ + .xmodule_display.xmodule_SequenceBlock .sequence-nav ol { + display: flex; } + /* line 100, /openedx/edx-platform/xmodule/assets/sequence/_display.scss */ + .xmodule_display.xmodule_SequenceBlock .sequence-nav ol li { + box-sizing: border-box; + min-width: 40px; + flex-grow: 1; + border-color: var(--border-color); + border-width: 1px; + border-top-style: solid; } + /* line 108, /openedx/edx-platform/xmodule/assets/sequence/_display.scss */ + .xmodule_display.xmodule_SequenceBlock .sequence-nav ol li:not(:last-child) { + border-right-style: solid; } + /* line 112, /openedx/edx-platform/xmodule/assets/sequence/_display.scss */ + .xmodule_display.xmodule_SequenceBlock .sequence-nav ol li button { + width: 100%; + height: 49px; + position: relative; + margin: 0; + padding: 0; + display: block; + text-align: center; + border-color: var(--border-color); + border-width: 1px; + border-bottom-style: solid; + box-sizing: border-box; + overflow: visible; } + /* line 129, /openedx/edx-platform/xmodule/assets/sequence/_display.scss */ + .xmodule_display.xmodule_SequenceBlock .sequence-nav ol li button .icon { + display: inline-block; + line-height: 100%; + font-size: 110%; + color: #5a5a5a; } + /* line 136, /openedx/edx-platform/xmodule/assets/sequence/_display.scss */ + .xmodule_display.xmodule_SequenceBlock .sequence-nav ol li button .fa-bookmark { + color: var(--link-color); } + /* line 142, /openedx/edx-platform/xmodule/assets/sequence/_display.scss */ + .xmodule_display.xmodule_SequenceBlock .sequence-nav ol li button.seq_video .icon::before { + content: "\f008"; } + /* line 149, /openedx/edx-platform/xmodule/assets/sequence/_display.scss */ + .xmodule_display.xmodule_SequenceBlock .sequence-nav ol li button.seq_other .icon::before { + content: "\f02d"; } + /* line 156, /openedx/edx-platform/xmodule/assets/sequence/_display.scss */ + .xmodule_display.xmodule_SequenceBlock .sequence-nav ol li button.seq_vertical .icon::before { + content: "\f00b"; } + /* line 163, /openedx/edx-platform/xmodule/assets/sequence/_display.scss */ + .xmodule_display.xmodule_SequenceBlock .sequence-nav ol li button.seq_problem .icon::before { + content: "\f044"; } + /* line 168, /openedx/edx-platform/xmodule/assets/sequence/_display.scss */ + .xmodule_display.xmodule_SequenceBlock .sequence-nav ol li button .sequence-tooltip { + text-align: left; + margin-top: 12px; + background: #333333; + color: var(--white); + font-family: var(--font-family-sans-serif); + line-height: lh(); + right: 0; + padding: 6px; + position: absolute; + top: 48px; + text-shadow: 0 -1px 0 var(--black); + white-space: pre; + pointer-events: none; } + /* line 186, /openedx/edx-platform/xmodule/assets/sequence/_display.scss */ + .xmodule_display.xmodule_SequenceBlock .sequence-nav ol li button .sequence-tooltip:empty { + background: none; } + /* line 189, /openedx/edx-platform/xmodule/assets/sequence/_display.scss */ + .xmodule_display.xmodule_SequenceBlock .sequence-nav ol li button .sequence-tooltip:empty::after { + display: none; } + /* line 194, /openedx/edx-platform/xmodule/assets/sequence/_display.scss */ + .xmodule_display.xmodule_SequenceBlock .sequence-nav ol li button .sequence-tooltip::after { + transform: rotate(45deg); + right: 18px; + background: #333333; + content: " "; + display: block; + height: 10px; + right: 18px; + position: absolute; + top: -5px; + width: 10px; } + /* line 212, /openedx/edx-platform/xmodule/assets/sequence/_display.scss */ + body.touch-based-device .xmodule_display.xmodule_SequenceBlock .sequence-nav ol li button:hover p { + display: none; } + /* line 217, /openedx/edx-platform/xmodule/assets/sequence/_display.scss */ + .xmodule_display.xmodule_SequenceBlock .sequence-nav-button { + display: block; + top: 0; + min-width: 40px; + max-width: 40px; + height: 100%; + text-shadow: none; + background: none; + background-color: #fff; + border-color: var(--border-color); + box-shadow: none; + font-size: inherit; + font-weight: normal; + padding: 0; + white-space: nowrap; + overflow-x: hidden; } + @media (min-width: 768px) { + /* line 217, /openedx/edx-platform/xmodule/assets/sequence/_display.scss */ + .xmodule_display.xmodule_SequenceBlock .sequence-nav-button { + min-width: 120px; + max-width: 200px; + text-overflow: ellipsis; } + /* line 241, /openedx/edx-platform/xmodule/assets/sequence/_display.scss */ + .xmodule_display.xmodule_SequenceBlock .sequence-nav-button span:not(:last-child) { + padding-right: calc((var(--baseline) / 2)); } } + /* line 246, /openedx/edx-platform/xmodule/assets/sequence/_display.scss */ + .xmodule_display.xmodule_SequenceBlock .sequence-nav-button .sequence-nav-button-label { + display: none; } + @media (min-width: 768px) { + /* line 246, /openedx/edx-platform/xmodule/assets/sequence/_display.scss */ + .xmodule_display.xmodule_SequenceBlock .sequence-nav-button .sequence-nav-button-label { + display: inline; } } + /* line 254, /openedx/edx-platform/xmodule/assets/sequence/_display.scss */ + .xmodule_display.xmodule_SequenceBlock .sequence-nav-button.button-previous { + order: -999; } + @media (min-width: 768px) { + /* line 254, /openedx/edx-platform/xmodule/assets/sequence/_display.scss */ + .xmodule_display.xmodule_SequenceBlock .sequence-nav-button.button-previous { + left: 0; + -webkit-border-top-left-radius: 3px; + -moz-border-topleft-radius: 3px; + border-top-left-radius: 3px; + -webkit-border-top-right-radius: 0; + -moz-border-topright-radius: 0; + border-top-right-radius: 0; + -webkit-border-bottom-right-radius: 0; + -moz-border-bottomright-radius: 0; + border-bottom-right-radius: 0; + -webkit-border-bottom-left-radius: 3px; + -moz-border-bottomleft-radius: 3px; + border-bottom-left-radius: 3px; } } + /* line 266, /openedx/edx-platform/xmodule/assets/sequence/_display.scss */ + .xmodule_display.xmodule_SequenceBlock .sequence-nav-button.button-next { + order: 999; } + @media (min-width: 768px) { + /* line 266, /openedx/edx-platform/xmodule/assets/sequence/_display.scss */ + .xmodule_display.xmodule_SequenceBlock .sequence-nav-button.button-next { + right: 0; + -webkit-border-top-left-radius: 0; + -moz-border-topleft-radius: 0; + border-top-left-radius: 0; + -webkit-border-top-right-radius: 3px; + -moz-border-topright-radius: 3px; + border-top-right-radius: 3px; + -webkit-border-bottom-right-radius: 3px; + -moz-border-bottomright-radius: 3px; + border-bottom-right-radius: 3px; + -webkit-border-bottom-left-radius: 0; + -moz-border-bottomleft-radius: 0; + border-bottom-left-radius: 0; } } + /* line 278, /openedx/edx-platform/xmodule/assets/sequence/_display.scss */ + .xmodule_display.xmodule_SequenceBlock .sequence-nav-button.disabled { + cursor: normal; } + /* line 283, /openedx/edx-platform/xmodule/assets/sequence/_display.scss */ + .xmodule_display.xmodule_SequenceBlock .seq_contents { + display: none; } + /* line 287, /openedx/edx-platform/xmodule/assets/sequence/_display.scss */ + .xmodule_display.xmodule_SequenceBlock .sequence-bottom { + position: relative; + height: 45px; + margin: lh(2) auto; + display: flex; + justify-content: center; } + /* line 294, /openedx/edx-platform/xmodule/assets/sequence/_display.scss */ + .xmodule_display.xmodule_SequenceBlock .sequence-bottom .sequence-nav-button { + position: relative; + min-width: 120px; + max-width: 200px; + text-overflow: ellipsis; } + /* line 300, /openedx/edx-platform/xmodule/assets/sequence/_display.scss */ + .xmodule_display.xmodule_SequenceBlock .sequence-bottom .sequence-nav-button:last-of-type { + border-left: none; } + @media print { + /* line 287, /openedx/edx-platform/xmodule/assets/sequence/_display.scss */ + .xmodule_display.xmodule_SequenceBlock .sequence-bottom { + display: none; } } + /* line 311, /openedx/edx-platform/xmodule/assets/sequence/_display.scss */ + .xmodule_display.xmodule_SequenceBlock #seq_content:focus, .xmodule_display.xmodule_SequenceBlock #seq_content:active { + outline: none; } + /* line 320, /openedx/edx-platform/xmodule/assets/sequence/_display.scss */ + .xmodule_display.xmodule_SequenceBlock .sequence-nav-button.focused, .xmodule_display.xmodule_SequenceBlock .sequence-nav-button:hover, .xmodule_display.xmodule_SequenceBlock .sequence-nav-button:active, .xmodule_display.xmodule_SequenceBlock .sequence-nav-button.active, + .xmodule_display.xmodule_SequenceBlock .sequence-nav button.focused, + .xmodule_display.xmodule_SequenceBlock .sequence-nav button:hover, + .xmodule_display.xmodule_SequenceBlock .sequence-nav button:active, + .xmodule_display.xmodule_SequenceBlock .sequence-nav button.active { + padding-top: 2px; + background-color: #0075b4; } + /* line 327, /openedx/edx-platform/xmodule/assets/sequence/_display.scss */ + .xmodule_display.xmodule_SequenceBlock .sequence-nav-button.focused .icon, .xmodule_display.xmodule_SequenceBlock .sequence-nav-button:hover .icon, .xmodule_display.xmodule_SequenceBlock .sequence-nav-button:active .icon, .xmodule_display.xmodule_SequenceBlock .sequence-nav-button.active .icon, + .xmodule_display.xmodule_SequenceBlock .sequence-nav button.focused .icon, + .xmodule_display.xmodule_SequenceBlock .sequence-nav button:hover .icon, + .xmodule_display.xmodule_SequenceBlock .sequence-nav button:active .icon, + .xmodule_display.xmodule_SequenceBlock .sequence-nav button.active .icon { + color: #fff; } + @media (min-width: 576px) { + /* line 320, /openedx/edx-platform/xmodule/assets/sequence/_display.scss */ + .xmodule_display.xmodule_SequenceBlock .sequence-nav-button.focused, .xmodule_display.xmodule_SequenceBlock .sequence-nav-button:hover, .xmodule_display.xmodule_SequenceBlock .sequence-nav-button:active, .xmodule_display.xmodule_SequenceBlock .sequence-nav-button.active, + .xmodule_display.xmodule_SequenceBlock .sequence-nav button.focused, + .xmodule_display.xmodule_SequenceBlock .sequence-nav button:hover, + .xmodule_display.xmodule_SequenceBlock .sequence-nav button:active, + .xmodule_display.xmodule_SequenceBlock .sequence-nav button.active { + border-bottom: 3px solid var(--link-color); + background-color: #fff; } + /* line 335, /openedx/edx-platform/xmodule/assets/sequence/_display.scss */ + .xmodule_display.xmodule_SequenceBlock .sequence-nav-button.focused .icon, .xmodule_display.xmodule_SequenceBlock .sequence-nav-button:hover .icon, .xmodule_display.xmodule_SequenceBlock .sequence-nav-button:active .icon, .xmodule_display.xmodule_SequenceBlock .sequence-nav-button.active .icon, + .xmodule_display.xmodule_SequenceBlock .sequence-nav button.focused .icon, + .xmodule_display.xmodule_SequenceBlock .sequence-nav button:hover .icon, + .xmodule_display.xmodule_SequenceBlock .sequence-nav button:active .icon, + .xmodule_display.xmodule_SequenceBlock .sequence-nav button.active .icon { + color: #0a0a0a; } } diff --git a/xmodule/assets/SequenceBlockDisplay.scss b/xmodule/assets/SequenceBlockDisplay.scss deleted file mode 100644 index 0c5aa3c82c49..000000000000 --- a/xmodule/assets/SequenceBlockDisplay.scss +++ /dev/null @@ -1,3 +0,0 @@ -.xmodule_display.xmodule_SequenceBlock { - @import "sequence/display.scss"; -} diff --git a/xmodule/assets/VideoBlockDisplay.css b/xmodule/assets/VideoBlockDisplay.css new file mode 100644 index 000000000000..c5fe0df9c4f7 --- /dev/null +++ b/xmodule/assets/VideoBlockDisplay.css @@ -0,0 +1,962 @@ +@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,700"); +/* line 1, /openedx/edx-platform/xmodule/assets/VideoBlockDisplay.scss */ +.xmodule_display.xmodule_VideoBlock { + /* stylelint-disable-line */ + /* stylelint-disable-line */ + /* stylelint-disable-line */ + /* stylelint-disable-line */ + /* stylelint-disable-line */ + /* stylelint-disable-line */ } + /* line 25, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock { + margin-bottom: calc((var(--baseline)*1.5)); } + /* line 29, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .is-hidden, .xmodule_display.xmodule_VideoBlock .video.closed .subtitles { + display: none; } + /* line 33, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video { + background: whitesmoke; + display: block; + margin: 0 -12px; + padding: 12px; + border-radius: 5px; + outline: none; } + /* line 15, /openedx/edx-platform/common/static/sass/bourbon/addons/_clearfix.scss */ + .xmodule_display.xmodule_VideoBlock .video:after { + content: ""; + display: table; + clear: both; } + /* line 43, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video:focus, .xmodule_display.xmodule_VideoBlock .video:active, .xmodule_display.xmodule_VideoBlock .video:hover { + border: 0; } + /* line 51, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video.is-initialized .video-wrapper .spinner { + display: none; } + /* line 59, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video.is-pre-roll .slider { + visibility: hidden; } + /* line 63, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video.is-pre-roll .video-player { + position: relative; } + /* line 66, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video.is-pre-roll .video-player::before { + display: block; + content: ""; + width: 100%; + padding-top: 55%; } + /* line 75, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .tc-wrapper { + position: relative; } + /* line 15, /openedx/edx-platform/common/static/sass/bourbon/addons/_clearfix.scss */ + .xmodule_display.xmodule_VideoBlock .video .tc-wrapper:after { + content: ""; + display: table; + clear: both; } + /* line 81, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .focus_grabber { + position: relative; + display: inline; + width: 0; + height: 0; } + /* line 88, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .downloads-heading { + margin: 1em 0 0; } + /* line 92, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .wrapper-video-bottom-section { + display: flex; + justify-content: space-between; } + /* line 96, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .wrapper-video-bottom-section .wrapper-download-video, + .xmodule_display.xmodule_VideoBlock .video .wrapper-video-bottom-section .wrapper-download-transcripts, + .xmodule_display.xmodule_VideoBlock .video .wrapper-video-bottom-section .wrapper-handouts, + .xmodule_display.xmodule_VideoBlock .video .wrapper-video-bottom-section .branding, + .xmodule_display.xmodule_VideoBlock .video .wrapper-video-bottom-section .wrapper-transcript-feedback { + flex: 1; + margin-top: var(--baseline); + padding-right: var(--baseline); + vertical-align: top; } + @media (min-width: 768px) { + /* line 110, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .wrapper-downloads { + display: flex; } } + /* line 115, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .wrapper-downloads .hd { + margin: 0; } + /* line 120, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .wrapper-downloads .wrapper-download-video .video-sources { + margin: 0; } + /* line 126, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .wrapper-downloads .wrapper-download-transcripts .list-download-transcripts { + margin: 0; + padding: 0; + list-style: none; } + /* line 131, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .wrapper-downloads .wrapper-download-transcripts .list-download-transcripts .transcript-option { + margin: 0; } + /* line 134, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .wrapper-downloads .wrapper-download-transcripts .list-download-transcripts .transcript-option a.btn, .xmodule_display.xmodule_VideoBlock .video .wrapper-downloads .wrapper-download-transcripts .list-download-transcripts .transcript-option a.btn-link { + font-size: 16px !important; + font-weight: unset; } + /* line 142, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .wrapper-downloads .branding { + padding-right: 0; } + /* line 145, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .wrapper-downloads .branding .host-tag { + position: absolute; + left: -9999em; + display: inline-block; + vertical-align: middle; + color: var(--body-color); } + /* line 153, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .wrapper-downloads .branding .brand-logo { + display: inline-block; + max-width: 100%; + max-height: calc((var(--baseline)*2)); + padding: calc((var(--baseline)/4)) 0; + vertical-align: middle; } + /* line 164, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .wrapper-transcript-feedback { + display: none; } + /* line 167, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .wrapper-transcript-feedback .transcript-feedback-buttons { + display: flex; } + /* line 170, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .wrapper-transcript-feedback .transcript-feedback-btn-wrapper { + margin-right: 10px; } + /* line 173, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .wrapper-transcript-feedback .thumbs-up-btn, + .xmodule_display.xmodule_VideoBlock .video .wrapper-transcript-feedback .thumbs-down-btn { + border: none; + box-shadow: none; + background: transparent; } + /* line 181, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .google-disclaimer { + display: none; + margin-top: var(--baseline); + padding-right: var(--baseline); + vertical-align: top; } + /* line 188, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-wrapper { + float: left; + margin-right: 2.27273%; + width: 65.90909%; + background-color: black; + position: relative; } + /* line 197, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-wrapper:hover .btn-play { + color: #0075b4; } + /* line 201, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-wrapper:hover .btn-play::after { + background: #fff; } + /* line 206, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-player-pre, + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-player-post { + height: 50px; + background-color: #111010; } + /* line 212, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .spinner { + transform: translate(-50%, -50%); + position: absolute; + z-index: 1; + background: rgba(0, 0, 0, 0.7); + top: 50%; + left: 50%; + padding: 30px; + border-radius: 25%; } + /* line 223, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .spinner::after { + animation: rotateCW 3s infinite linear; + content: ''; + display: block; + width: 30px; + height: 30px; + border: 7px solid white; + border-top-color: transparent; + border-radius: 100%; + position: relative; } + /* line 237, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .btn-play { + transform: translate(-50%, -50%); + position: absolute; + z-index: 1; + top: 46%; + left: 50%; + font-size: 4em; + cursor: pointer; + opacity: 0.1; } + /* line 248, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .btn-play::after { + background: var(--white); + position: absolute; + width: 50%; + height: 50%; + content: ''; + left: 0; + top: 0; + bottom: 0; + right: 0; + margin: auto; + z-index: -1; } + /* line 263, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .closed-captions { + left: 5%; + position: absolute; + width: 90%; + box-sizing: border-box; + top: 70%; + text-align: center; } + /* line 273, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .closed-captions.is-visible { + max-height: calc((var(--baseline) * 3)); + border-radius: calc((var(--baseline) / 5)); + padding: 8px calc((var(--baseline) / 2)) 8px calc((var(--baseline) * 1.5)); + background: rgba(0, 0, 0, 0.75); + color: var(--yellow); } + /* line 280, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .closed-captions.is-visible::before { + position: absolute; + display: inline-block; + top: 50%; + left: var(--baseline); + margin-top: -0.6em; + font-family: 'FontAwesome'; + content: "\f142"; + color: var(--white); + opacity: 0.5; } + /* line 294, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .closed-captions.is-visible:hover, .xmodule_display.xmodule_VideoBlock .video .video-wrapper .closed-captions.is-visible.is-dragging { + background: black; + cursor: move; } + /* line 299, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .closed-captions.is-visible:hover::before, .xmodule_display.xmodule_VideoBlock .video .video-wrapper .closed-captions.is-visible.is-dragging::before { + opacity: 1; } + /* line 305, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-player { + overflow: hidden; + min-height: 158px; } + /* line 309, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-player > div { + height: 100%; } + /* line 312, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-player > div.hidden { + display: none; } + /* line 317, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-player .video-error, + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-player .video-hls-error { + padding: calc((var(--baseline) / 5)); + background: black; + color: white !important; } + /* line 324, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-player object, + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-player iframe, + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-player video { + left: 0; + display: block; + border: none; + width: 100%; } + /* line 334, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-player h4 { + text-align: center; + color: white; } + /* line 338, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-player h4.hidden { + display: none; } + /* line 344, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls { + position: relative; + border: 0; + background: #282c2e; + color: #f0f3f5; } + /* line 15, /openedx/edx-platform/common/static/sass/bourbon/addons/_clearfix.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls:after { + content: ""; + display: table; + clear: both; } + /* line 354, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls:hover ul, + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls:hover div, .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls:focus ul, + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls:focus div { + opacity: 1; } + /* line 360, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .control { + display: inline-block; + vertical-align: middle; + margin: 0; + border: 0; + border-radius: 0; + padding: calc((var(--baseline) / 2)) calc((var(--baseline) / 1.5)); + background: #282c2e; + box-shadow: none; + text-shadow: none; + color: #cfd8dc; } + /* line 375, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .control:hover, .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .control:focus { + background: #171a1b; } + /* line 380, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .control:active, .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .is-active.control, .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .active.control { + color: #0ea6ec; } + /* line 390, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .control .icon { + width: 1em; } + /* line 393, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .control .icon.icon-hd { + width: auto; } + /* line 401, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .slider { + transform-origin: bottom left; + transition: height 0.7s ease-in-out 0s; + box-sizing: border-box; + position: absolute; + bottom: 100%; + left: 0; + right: 0; + z-index: 1; + height: calc((var(--baseline) / 4)); + margin-left: 0; + border: 1px solid #4f595d; + border-radius: 0; + background: #4f595d; } + /* line 15, /openedx/edx-platform/common/static/sass/bourbon/addons/_clearfix.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .slider:after { + content: ""; + display: table; + clear: both; } + /* line 418, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .slider .ui-widget-header { + background: #8e3e63; + border: 1px solid #8e3e63; + box-shadow: none; + top: -1px; + left: -1px; } + /* line 426, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .slider .ui-corner-all.slider-range { + opacity: 0.3; + background-color: #1e91d3; } + /* line 431, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .slider .ui-slider-handle { + transform-origin: bottom left; + transition: all 0.7s ease-in-out 0s; + box-sizing: border-box; + top: -1px; + height: calc((var(--baseline) / 4)); + width: calc((var(--baseline) / 4)); + margin-left: calc(-1 * (var(--baseline) / 8)); + border: 1px solid #cb598d; + border-radius: calc((var(--baseline) / 5)); + padding: 0; + background: #cb598d; + box-shadow: none; } + /* line 448, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .slider .ui-slider-handle:focus, .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .slider .ui-slider-handle:hover { + background-color: #db8baf; + border-color: #db8baf; } + /* line 456, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .vcr { + float: left; + list-style: none; + border-right: 1px solid #282c2e; + padding: 0; } + @media (max-width: 1120px) { + /* line 456, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .vcr { + margin-right: lh(0.5); + font-size: 0.875em; } } + /* line 472, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .vcr .video_control:focus { + position: relative; } + /* line 476, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .vcr .video_control.skip { + white-space: nowrap; } + /* line 481, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .vcr .vidtime { + padding-left: lh(0.75); + display: inline-block; + color: #cfd8dc; + -webkit-font-smoothing: antialiased; } + @media (max-width: 1120px) { + /* line 481, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .vcr .vidtime { + padding-left: lh(0.5); } } + /* line 497, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls { + float: right; + border-left: 1px dotted #4f595d; } + /* line 501, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .volume, + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .add-fullscreen, + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .grouped-controls, + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .auto-advance, + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .quality-control { + border-left: 1px dotted #4f595d; } + /* line 515, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .speed-button:focus, + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .volume > .control:focus, + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .add-fullscreen:focus, + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .auto-advance:focus, + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .quality-control:focus, + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .toggle-transcript:focus { + position: relative; } + /* line 520, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .menu-container { + position: relative; } + /* line 523, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .menu-container .menu { + transition: none; + position: absolute; + display: none; + bottom: calc((var(--baseline) * 2)); + right: 0; + width: 120px; + margin: 0; + border: none; + padding: 0; + box-shadow: none; + background-color: #282c2e; + list-style: none; } + /* line 542, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .menu-container .menu li { + color: #e7ecee; } + /* line 547, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .menu-container .menu li .speed-option, + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .menu-container .menu li .control-lang { + text-align: left; + display: block; + width: 100%; + border: 0; + border-radius: 0; + padding: lh(0.5); + background: #282c2e; + box-shadow: none; + color: #e7ecee; + overflow: hidden; + text-shadow: none; + text-overflow: ellipsis; + white-space: nowrap; } + /* line 564, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .menu-container .menu li .speed-option:hover, .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .menu-container .menu li .speed-option:focus, + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .menu-container .menu li .control-lang:hover, + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .menu-container .menu li .control-lang:focus { + background-color: #4f595d; + color: #fcfcfc; } + /* line 572, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .menu-container .menu li.is-active .speed-option, + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .menu-container .menu li.is-active .control-lang { + border-left: var(--baseline)/10 solid #0ea6ec; + font-weight: var(--font-bold); + color: #0ea6ec; } + /* line 584, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .menu-container.is-opened .menu { + display: block; } + /* line 590, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .speeds, + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .lang, + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .grouped-controls { + display: inline-block; } + /* line 599, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .speeds.is-opened .control .icon { + transform: rotate(-90deg); } + /* line 612, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .speeds .speed-button .label { + padding: 0 calc((var(--baseline)/3)) 0 0; + font-family: var(--font-family-sans-serif); + color: #e7ecee; } + @media (max-width: 1120px) { + /* line 612, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .speeds .speed-button .label { + position: absolute; + clip: rect(1px, 1px, 1px, 1px); } } + /* line 624, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .speeds .speed-button .value { + padding: 0 lh(0.5) 0 0; + color: #e7ecee; + font-weight: bold; } + @media (max-width: 1120px) { + /* line 624, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .speeds .speed-button .value { + padding: 0 lh(0.5); } } + /* line 638, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .lang .language-menu { + width: var(--baseline); + padding: calc((var(--baseline) / 2)) 0; } + /* line 653, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .lang.is-opened .control .icon { + transform: rotate(90deg); } + /* line 666, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .volume { + display: inline-block; + position: relative; } + /* line 671, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .volume.is-opened .volume-slider-container { + display: block; + opacity: 1; } + /* line 677, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .volume:not(:first-child) > a { + border-left: none; } + /* line 681, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .volume .volume-slider-container { + transition: none; + display: none; + position: absolute; + bottom: calc((var(--baseline) * 2)); + right: 0; + width: 41px; + height: 120px; + background-color: #282c2e; } + /* line 696, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .volume .volume-slider-container .volume-slider { + height: 100px; + width: calc((var(--baseline) / 4)); + margin: 14px auto; + box-sizing: border-box; + border: 1px solid #4f595d; + background: #4f595d; } + /* line 704, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .volume .volume-slider-container .volume-slider .ui-slider-handle { + transition: height var(--tmg-s2) ease-in-out 0s, width var(--tmg-s2) ease-in-out 0s; + left: -5px; + box-sizing: border-box; + height: 13px; + width: 13px; + border: 1px solid #cb598d; + border-radius: calc((var(--baseline) / 5)); + padding: 0; + background: #cb598d; + box-shadow: none; } + /* line 719, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .volume .volume-slider-container .volume-slider .ui-slider-handle:hover, .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .volume .volume-slider-container .volume-slider .ui-slider-handle:focus { + background: #db8baf; + border-color: #db8baf; } + /* line 726, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .volume .volume-slider-container .volume-slider .ui-slider-range { + background: #8e3e63; + border: 1px solid #8e3e63; + left: -1px; + bottom: -1px; } + /* line 736, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .quality-control { + font-weight: 700; + letter-spacing: -1px; } + /* line 740, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .quality-control.active { + color: #0ea6ec; } + /* line 744, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .quality-control.is-hidden, .xmodule_display.xmodule_VideoBlock .video.closed .video-wrapper .video-controls .secondary-controls .quality-control.subtitles { + display: none !important; } + /* line 750, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .toggle-transcript.is-active { + color: #0ea6ec; } + /* line 756, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .lang > .hide-subtitles { + transition: none; } + /* line 765, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-wrapper:hover .video-controls .slider { + height: calc((var(--baseline) / 1.5)); } + /* line 768, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-wrapper:hover .video-controls .slider .ui-slider-handle { + height: calc((var(--baseline) / 1.5)); + width: calc((var(--baseline) / 1.5)); } + /* line 778, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video.video-fullscreen .closed-captions { + width: 65%; } + /* line 782, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video.video-fullscreen.closed .closed-captions { + width: 90%; } + /* line 787, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .subtitles { + float: left; + overflow: auto; + max-height: 460px; + width: 31.81818%; + padding: 0; + font-size: 14px; + visibility: visible; } + /* line 797, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .subtitles a { + color: #0074b5; } + /* line 801, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .subtitles .subtitles-menu { + height: 100%; + margin: 0; + padding: 0 3px; + list-style: none; } + /* line 807, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .subtitles .subtitles-menu li { + margin-bottom: 8px; + border: 0; + padding: 0; + color: #0074b5; + line-height: lh(); } + /* line 816, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .subtitles .subtitles-menu li span { + display: block; } + /* line 820, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .subtitles .subtitles-menu li.current { + color: #333; + font-weight: 700; } + /* line 825, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .subtitles .subtitles-menu li.focused { + outline: #000 dotted thin; + outline-offset: -1px; } + /* line 830, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .subtitles .subtitles-menu li:hover, .xmodule_display.xmodule_VideoBlock .video .subtitles .subtitles-menu li:focus { + text-decoration: underline; } + /* line 835, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .subtitles .subtitles-menu li:empty { + margin-bottom: 0; } + /* line 839, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .subtitles .subtitles-menu li.spacing:last-of-type { + position: relative; } + /* line 842, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .subtitles .subtitles-menu li.spacing:last-of-type .transcript-end { + position: absolute; + bottom: 0; } + /* line 852, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video.closed .video-wrapper { + width: 100%; + background-color: inherit; } + /* line 857, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video.closed .video-wrapper .video-controls.html5 { + bottom: 0; + left: 0; + right: 0; + position: absolute; + z-index: 1; } + /* line 865, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video.closed .video-wrapper .video-player-pre, + .xmodule_display.xmodule_VideoBlock .video.closed .video-wrapper .video-player-post { + height: 0; } + /* line 871, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video.closed .video-wrapper .video-player h3 { + color: black; } + /* line 880, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video.closed .subtitles.html5 { + background-color: rgba(243, 243, 243, 0.8); + height: 100%; + position: absolute; + right: 0; + bottom: 0; + top: 0; + width: 275px; + padding: 0 var(--baseline); + display: none; } + /* line 895, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video.video-fullscreen { + background: rgba(0, 0, 0, 0.95); + border: 0; + bottom: 0; + height: 100%; + left: 0; + margin: 0; + padding: 0; + position: fixed; + top: 0; + width: 100%; + vertical-align: middle; + border-radius: 0; } + /* line 913, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video.video-fullscreen.closed .tc-wrapper .video-wrapper { + width: 100%; } + /* line 919, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video.video-fullscreen .video-wrapper .video-player-pre, + .xmodule_display.xmodule_VideoBlock .video.video-fullscreen .video-wrapper .video-player-post { + height: 0; } + /* line 924, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video.video-fullscreen .video-wrapper { + position: static; } + /* line 929, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video.video-fullscreen .video-wrapper .video-player h3 { + color: white; } + /* line 934, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video.video-fullscreen .tc-wrapper { + width: 100%; + height: 100%; + position: static; } + /* line 15, /openedx/edx-platform/common/static/sass/bourbon/addons/_clearfix.scss */ + .xmodule_display.xmodule_VideoBlock .video.video-fullscreen .tc-wrapper:after { + content: ""; + display: table; + clear: both; } + /* line 941, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video.video-fullscreen .tc-wrapper .video-wrapper { + height: 100%; + width: 75%; + margin-right: 0; + vertical-align: middle; } + /* line 949, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video.video-fullscreen .tc-wrapper .video-wrapper object, + .xmodule_display.xmodule_VideoBlock .video.video-fullscreen .tc-wrapper .video-wrapper iframe, + .xmodule_display.xmodule_VideoBlock .video.video-fullscreen .tc-wrapper .video-wrapper video { + position: absolute; + width: auto; + height: auto; } + /* line 958, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video.video-fullscreen .tc-wrapper .video-controls { + position: absolute; + bottom: 0; + left: 0; + width: 100%; } + /* line 968, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video.video-fullscreen .subtitles { + height: 100%; + width: 25%; + padding: lh(); + box-sizing: border-box; + transition: none; + background: var(--black); + visibility: visible; } + /* line 979, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video.video-fullscreen .subtitles li { + color: #aaa; } + /* line 982, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video.video-fullscreen .subtitles li.current { + color: var(--white); } + /* line 992, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video.is-touch .tc-wrapper .video-wrapper object, + .xmodule_display.xmodule_VideoBlock .video.is-touch .tc-wrapper .video-wrapper iframe, + .xmodule_display.xmodule_VideoBlock .video.is-touch .tc-wrapper .video-wrapper video { + width: 100%; + height: 100%; } + /* line 1002, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-pre-roll { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-position: 50% 50%; + background-repeat: no-repeat; + background-size: 100%; + background-color: var(--black); } + /* line 1015, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-pre-roll.is-html5 { + background-size: 15%; } + /* line 1019, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-pre-roll .btn-play.btn-pre-roll { + padding: var(--baseline); + border: none; + border-radius: var(--baseline); + background: var(--black-t2); + box-shadow: none; } + /* line 1026, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-pre-roll .btn-play.btn-pre-roll::after { + display: none; } + /* line 1032, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-pre-roll .btn-play.btn-pre-roll img { + height: calc((var(--baseline) * 4)); + width: calc((var(--baseline) * 4)); } + /* line 1037, /openedx/edx-platform/xmodule/assets/video/_display.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-pre-roll .btn-play.btn-pre-roll:hover, .xmodule_display.xmodule_VideoBlock .video .video-pre-roll .btn-play.btn-pre-roll:focus { + background: var(--blue); } + /* line 88, lms/static/sass/base/_mixins.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .slider .ui-slider-handle, .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .menu-container .menu li, .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .volume .volume-slider-container .volume-slider .ui-slider-handle, .xmodule_display.xmodule_VideoBlock .video .subtitles .subtitles-menu li, .xmodule_display.xmodule_VideoBlock .a11y-menu-container .a11y-menu-list li { + cursor: pointer; } + /* line 100, lms/static/sass/base/_mixins.scss */ + .xmodule_display.xmodule_VideoBlock .video.closed .subtitles.html5 { + z-index: 0; } + /* line 101, lms/static/sass/base/_mixins.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .menu-container .menu, .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .volume .volume-slider-container { + z-index: 10; } + /* line 103, lms/static/sass/base/_mixins.scss */ + .xmodule_display.xmodule_VideoBlock .video .video-pre-roll, .xmodule_display.xmodule_VideoBlock .a11y-menu-container .a11y-menu-list { + z-index: 1000; } + /* line 104, lms/static/sass/base/_mixins.scss */ + .xmodule_display.xmodule_VideoBlock .video.video-fullscreen, .xmodule_display.xmodule_VideoBlock .video.video-fullscreen .tc-wrapper .video-controls, .xmodule_display.xmodule_VideoBlock .overlay { + z-index: 10000; } + /* line 105, lms/static/sass/base/_mixins.scss */ + .xmodule_display.xmodule_VideoBlock .contextmenu, + .xmodule_display.xmodule_VideoBlock .submenu { + z-index: 100000; } + /* line 11, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */ + .xmodule_display.xmodule_VideoBlock .video-tracks .a11y-menu-container > a::after { + font-family: FontAwesome; + -webkit-font-smoothing: antialiased; + display: inline-block; + speak: none; } + /* line 18, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */ + .xmodule_display.xmodule_VideoBlock .a11y-menu-container { + position: relative; } + /* line 22, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */ + .xmodule_display.xmodule_VideoBlock .a11y-menu-container.open .a11y-menu-list { + display: block; } + /* line 27, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */ + .xmodule_display.xmodule_VideoBlock .a11y-menu-container .a11y-menu-list { + top: 100%; + margin: 0; + padding: 0; + display: none; + position: absolute; + list-style: none; + background-color: var(--white); + border: 1px solid #eee; } + /* line 39, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */ + .xmodule_display.xmodule_VideoBlock .a11y-menu-container .a11y-menu-list li { + margin: 0; + padding: 0; + border-bottom: 1px solid #eee; + color: var(--white); } + /* line 47, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */ + .xmodule_display.xmodule_VideoBlock .a11y-menu-container .a11y-menu-list li a { + display: block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + color: var(--gray-l2); + font-size: 14px; + line-height: 23px; } + /* line 56, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */ + .xmodule_display.xmodule_VideoBlock .a11y-menu-container .a11y-menu-list li a:hover, .xmodule_display.xmodule_VideoBlock .a11y-menu-container .a11y-menu-list li a:focus { + color: var(--gray-d1); } + /* line 63, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */ + .xmodule_display.xmodule_VideoBlock .a11y-menu-container .a11y-menu-list li.active a { + color: #009fe6; } + /* line 68, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */ + .xmodule_display.xmodule_VideoBlock .a11y-menu-container .a11y-menu-list li:last-child { + box-shadow: none; + border-bottom: 0; + margin-top: 0; } + /* line 81, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */ + .xmodule_display.xmodule_VideoBlock .video-tracks .a11y-menu-container { + display: inline-block; + vertical-align: top; + border-left: 1px solid #eee; } + /* line 87, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */ + .xmodule_display.xmodule_VideoBlock .video-tracks .a11y-menu-container.open > a { + background-color: var(--action-primary-active-bg); + color: var(--very-light-text); } + /* line 91, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */ + .xmodule_display.xmodule_VideoBlock .video-tracks .a11y-menu-container.open > a::after { + color: var(--very-light-text); } + /* line 97, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */ + .xmodule_display.xmodule_VideoBlock .video-tracks .a11y-menu-container > a { + transition: all var(--tmg-f2) ease-in-out 0s; + font-size: 12px; + display: block; + border-radius: 0 3px 3px 0; + background-color: var(--very-light-text); + padding: calc((var(--baseline)*0.75)) calc((var(--baseline)*1.25)) calc((var(--baseline)*0.75)) calc((var(--baseline)*0.75)); + color: var(--gray-l2); + min-width: 1.5em; + line-height: 14px; + text-align: center; + overflow: hidden; + text-overflow: ellipsis; } + /* line 112, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */ + .xmodule_display.xmodule_VideoBlock .video-tracks .a11y-menu-container > a::after { + content: "\f0d7"; + position: absolute; + right: calc((var(--baseline)*0.5)); + top: 33%; + color: var(--lighter-base-font-color); } + /* line 123, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */ + .xmodule_display.xmodule_VideoBlock .video-tracks .a11y-menu-container .a11y-menu-list { + right: 0; } + /* line 126, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */ + .xmodule_display.xmodule_VideoBlock .video-tracks .a11y-menu-container .a11y-menu-list li { + font-size: 0.875em; } + /* line 129, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */ + .xmodule_display.xmodule_VideoBlock .video-tracks .a11y-menu-container .a11y-menu-list li a { + border: 0; + display: block; + padding: 0.70788em; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; } + /* line 143, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */ + .xmodule_display.xmodule_VideoBlock .contextmenu, + .xmodule_display.xmodule_VideoBlock .submenu { + border: 1px solid #333; + background: var(--white); + color: #333; + padding: 0; + margin: 0; + list-style: none; + position: absolute; + top: 0; + display: none; + outline: none; + cursor: default; + white-space: nowrap; } + /* line 160, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */ + .xmodule_display.xmodule_VideoBlock .contextmenu.is-opened, + .xmodule_display.xmodule_VideoBlock .submenu.is-opened { + display: block; } + /* line 164, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */ + .xmodule_display.xmodule_VideoBlock .contextmenu .menu-item, + .xmodule_display.xmodule_VideoBlock .contextmenu .submenu-item, + .xmodule_display.xmodule_VideoBlock .submenu .menu-item, + .xmodule_display.xmodule_VideoBlock .submenu .submenu-item { + border-top: 1px solid var(--gray-l3); + padding: calc((var(--baseline)/4)) calc((var(--baseline)/2)); + outline: none; } + /* line 170, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */ + .xmodule_display.xmodule_VideoBlock .contextmenu .menu-item > span, + .xmodule_display.xmodule_VideoBlock .contextmenu .submenu-item > span, + .xmodule_display.xmodule_VideoBlock .submenu .menu-item > span, + .xmodule_display.xmodule_VideoBlock .submenu .submenu-item > span { + color: #333; } + /* line 174, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */ + .xmodule_display.xmodule_VideoBlock .contextmenu .menu-item:first-child, + .xmodule_display.xmodule_VideoBlock .contextmenu .submenu-item:first-child, + .xmodule_display.xmodule_VideoBlock .submenu .menu-item:first-child, + .xmodule_display.xmodule_VideoBlock .submenu .submenu-item:first-child { + border-top: none; } + /* line 178, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */ + .xmodule_display.xmodule_VideoBlock .contextmenu .menu-item:focus, + .xmodule_display.xmodule_VideoBlock .contextmenu .submenu-item:focus, + .xmodule_display.xmodule_VideoBlock .submenu .menu-item:focus, + .xmodule_display.xmodule_VideoBlock .submenu .submenu-item:focus { + background: #333; + color: var(--white); } + /* line 182, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */ + .xmodule_display.xmodule_VideoBlock .contextmenu .menu-item:focus > span, + .xmodule_display.xmodule_VideoBlock .contextmenu .submenu-item:focus > span, + .xmodule_display.xmodule_VideoBlock .submenu .menu-item:focus > span, + .xmodule_display.xmodule_VideoBlock .submenu .submenu-item:focus > span { + color: var(--white); } + /* line 188, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */ + .xmodule_display.xmodule_VideoBlock .contextmenu .submenu-item, + .xmodule_display.xmodule_VideoBlock .submenu .submenu-item { + position: relative; + padding: calc((var(--baseline)/4)) var(--baseline) calc((var(--baseline)/4)) calc((var(--baseline)/2)); } + /* line 192, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */ + .xmodule_display.xmodule_VideoBlock .contextmenu .submenu-item::after, + .xmodule_display.xmodule_VideoBlock .submenu .submenu-item::after { + content: '\25B6'; + position: absolute; + right: 5px; + line-height: 25px; + font-size: 10px; } + /* line 200, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */ + .xmodule_display.xmodule_VideoBlock .contextmenu .submenu-item .submenu, + .xmodule_display.xmodule_VideoBlock .submenu .submenu-item .submenu { + display: none; } + /* line 204, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */ + .xmodule_display.xmodule_VideoBlock .contextmenu .submenu-item.is-opened, + .xmodule_display.xmodule_VideoBlock .submenu .submenu-item.is-opened { + background: #333; + color: var(--white); } + /* line 208, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */ + .xmodule_display.xmodule_VideoBlock .contextmenu .submenu-item.is-opened > span, + .xmodule_display.xmodule_VideoBlock .submenu .submenu-item.is-opened > span { + color: var(--white); } + /* line 212, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */ + .xmodule_display.xmodule_VideoBlock .contextmenu .submenu-item.is-opened > .submenu, + .xmodule_display.xmodule_VideoBlock .submenu .submenu-item.is-opened > .submenu { + display: block; } + /* line 217, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */ + .xmodule_display.xmodule_VideoBlock .contextmenu .submenu-item .is-selected, + .xmodule_display.xmodule_VideoBlock .submenu .submenu-item .is-selected { + font-weight: bold; } + /* line 222, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */ + .xmodule_display.xmodule_VideoBlock .contextmenu .is-disabled, + .xmodule_display.xmodule_VideoBlock .submenu .is-disabled { + pointer-events: none; + color: var(--gray-l3); } + /* line 228, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */ + .xmodule_display.xmodule_VideoBlock .overlay { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: transparent; } diff --git a/xmodule/assets/VideoBlockDisplay.scss b/xmodule/assets/VideoBlockDisplay.scss deleted file mode 100644 index ccd9a3ed1326..000000000000 --- a/xmodule/assets/VideoBlockDisplay.scss +++ /dev/null @@ -1,4 +0,0 @@ -.xmodule_display.xmodule_VideoBlock { - @import "video/display.scss"; - @import "video/accessible_menu.scss"; -} diff --git a/xmodule/assets/VideoBlockEditor.css b/xmodule/assets/VideoBlockEditor.css new file mode 100644 index 000000000000..3577fdb22d32 --- /dev/null +++ b/xmodule/assets/VideoBlockEditor.css @@ -0,0 +1,139 @@ +@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,700"); +/* line 1, /openedx/edx-platform/xmodule/assets/VideoBlockEditor.scss */ +.xmodule_edit.xmodule_VideoBlock { } + /* line 123, common/static/sass/_mixins.scss */ + .xmodule_edit.xmodule_VideoBlock .ui-col-wide { + width: 74.46809%; + margin-right: 2.12766%; + float: left; } + /* line 130, common/static/sass/_mixins.scss */ + .xmodule_edit.xmodule_VideoBlock .ui-col-narrow { + width: 23.40426%; + float: left; } + /* line 342, common/static/sass/_mixins.scss */ + .xmodule_edit.xmodule_VideoBlock .ui-loading { + box-shadow: inset 0 1px 2px 1px rgba(0, 0, 0, 0.2); + padding: 15px 20px; } + /* line 368, common/static/sass/_mixins.scss */ + .xmodule_edit.xmodule_VideoBlock .ui-loading { + animation: fadeIn 0.25s linear 1; + opacity: 0.6; + background-color: #fff; + padding: 30px 20px; + text-align: center; } + /* line 379, common/static/sass/_mixins.scss */ + .xmodule_edit.xmodule_VideoBlock .ui-loading .spin { + display: inline-block; } + /* line 385, common/static/sass/_mixins.scss */ + .xmodule_edit.xmodule_VideoBlock .ui-loading .copy { + padding-left: 5px; } + /* line 390, common/static/sass/_mixins.scss */ + .xmodule_edit.xmodule_VideoBlock .is-hidden { + display: none; } + /* line 10, /openedx/edx-platform/xmodule/assets/tabs/_tabs.scss */ + .xmodule_edit.xmodule_VideoBlock .tabs-wrapper { + padding-top: 0; + position: relative; } + /* line 14, /openedx/edx-platform/xmodule/assets/tabs/_tabs.scss */ + .xmodule_edit.xmodule_VideoBlock .tabs-wrapper .wrapper-comp-settings { + display: block; } + /* line 20, /openedx/edx-platform/xmodule/assets/tabs/_tabs.scss */ + .xmodule_edit.xmodule_VideoBlock .editor-single-tab-name { + display: none; } + /* line 25, /openedx/edx-platform/xmodule/assets/tabs/_tabs.scss */ + .xmodule_edit.xmodule_VideoBlock .editor-with-tabs { + position: relative; } + /* line 15, /openedx/edx-platform/common/static/sass/bourbon/addons/_clearfix.scss */ + .xmodule_edit.xmodule_VideoBlock .editor-with-tabs:after { + content: ""; + display: table; + clear: both; } + /* line 31, /openedx/edx-platform/xmodule/assets/tabs/_tabs.scss */ + .xmodule_edit.xmodule_VideoBlock .editor-with-tabs .edit-header { + box-sizing: border-box; + padding: 18px var(--baseline); + top: 0 !important; + right: 0; + background-color: var(--blue); + border-bottom: 1px solid var(--blue-d2); + color: var(--white); } + /* line 42, /openedx/edx-platform/xmodule/assets/tabs/_tabs.scss */ + .xmodule_edit.xmodule_VideoBlock .editor-with-tabs .edit-header .component-name { + position: relative; + top: 0; + left: 0; + width: 50%; + color: var(--white); + font-weight: 600; } + /* line 52, /openedx/edx-platform/xmodule/assets/tabs/_tabs.scss */ + .xmodule_edit.xmodule_VideoBlock .editor-with-tabs .edit-header .component-name em { + display: inline-block; + margin-right: calc((var(--baseline)/4)); + font-weight: 400; + color: var(--white); } + /* line 61, /openedx/edx-platform/xmodule/assets/tabs/_tabs.scss */ + .xmodule_edit.xmodule_VideoBlock .editor-with-tabs .edit-header .editor-tabs { + list-style: none; + right: 0; + top: calc((var(--baseline)/4)); + position: absolute; + padding: 12px calc((var(--baseline)*0.75)); } + /* line 68, /openedx/edx-platform/xmodule/assets/tabs/_tabs.scss */ + .xmodule_edit.xmodule_VideoBlock .editor-with-tabs .edit-header .editor-tabs .inner_tab_wrap { + display: inline-block; + margin-left: 8px; } + /* line 72, /openedx/edx-platform/xmodule/assets/tabs/_tabs.scss */ + .xmodule_edit.xmodule_VideoBlock .editor-with-tabs .edit-header .editor-tabs .inner_tab_wrap a.tab { + font-size: 14px; + font-size: 1.4rem; + background-color: rgba(255, 255, 255, 0.3); + background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0)); + background-image: linear-gradient(to bottom,rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0)); + border: 1px solid var(--blue-d1); + border-radius: 3px; + padding: calc((var(--baseline)/4)) var(--baseline); + background-color: var(--blue); + font-weight: bold; + color: var(--white); } + /* line 83, /openedx/edx-platform/xmodule/assets/tabs/_tabs.scss */ + .xmodule_edit.xmodule_VideoBlock .editor-with-tabs .edit-header .editor-tabs .inner_tab_wrap a.tab.current { + background-color: var(--blue); + background-image: -webkit-linear-gradient(var(--blue), var(--blue)); + background-image: linear-gradient(to ,var(--blue)); + color: var(--blue-d1); + box-shadow: inset 0 1px 2px 1px var(--shadow-l1); + background-color: var(--blue-d4); + cursor: default; } + /* line 92, /openedx/edx-platform/xmodule/assets/tabs/_tabs.scss */ + .xmodule_edit.xmodule_VideoBlock .editor-with-tabs .edit-header .editor-tabs .inner_tab_wrap a.tab:hover, .xmodule_edit.xmodule_VideoBlock .editor-with-tabs .edit-header .editor-tabs .inner_tab_wrap a.tab:focus { + box-shadow: inset 0 1px 2px 1px var(--shadow); + background-image: linear-gradient(#009fe6, #009fe6) !important; } + /* line 102, /openedx/edx-platform/xmodule/assets/tabs/_tabs.scss */ + .xmodule_edit.xmodule_VideoBlock .editor-with-tabs .is-inactive { + display: none; } + /* line 106, /openedx/edx-platform/xmodule/assets/tabs/_tabs.scss */ + .xmodule_edit.xmodule_VideoBlock .editor-with-tabs .comp-subtitles-entry { + text-align: center; } + /* line 109, /openedx/edx-platform/xmodule/assets/tabs/_tabs.scss */ + .xmodule_edit.xmodule_VideoBlock .editor-with-tabs .comp-subtitles-entry .file-upload { + display: none; } + /* line 114, /openedx/edx-platform/xmodule/assets/tabs/_tabs.scss */ + .xmodule_edit.xmodule_VideoBlock .editor-with-tabs .comp-subtitles-entry .comp-subtitles-import-list > li { + display: block; + margin: calc(var(--baseline)/2) 0; } + /* line 119, /openedx/edx-platform/xmodule/assets/tabs/_tabs.scss */ + .xmodule_edit.xmodule_VideoBlock .editor-with-tabs .comp-subtitles-entry .comp-subtitles-import-list .blue-button { + font-size: 1em; + display: block; + width: 70%; + margin: 0 auto; + text-align: center; } + /* line 130, /openedx/edx-platform/xmodule/assets/tabs/_tabs.scss */ + .xmodule_edit.xmodule_VideoBlock .component-tab { + background: var(--white); + position: relative; + border-top: 1px solid #8891a1; } + /* line 135, /openedx/edx-platform/xmodule/assets/tabs/_tabs.scss */ + .xmodule_edit.xmodule_VideoBlock .component-tab#advanced { + padding: 0; + border: none; } diff --git a/xmodule/assets/VideoBlockEditor.scss b/xmodule/assets/VideoBlockEditor.scss deleted file mode 100644 index eb966091ce46..000000000000 --- a/xmodule/assets/VideoBlockEditor.scss +++ /dev/null @@ -1,3 +0,0 @@ -.xmodule_edit.xmodule_VideoBlock { - @import "tabs/tabs.scss"; -} diff --git a/xmodule/assets/WordCloudBlockDisplay.css b/xmodule/assets/WordCloudBlockDisplay.css new file mode 100644 index 000000000000..29d0698968b4 --- /dev/null +++ b/xmodule/assets/WordCloudBlockDisplay.css @@ -0,0 +1,26 @@ +@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,700"); +/* line 1, /openedx/edx-platform/xmodule/assets/WordCloudBlockDisplay.scss */ +.xmodule_display.xmodule_WordCloudBlock { + /* stylelint-disable-line */ + /* stylelint-disable-line */ } + /* line 6, /openedx/edx-platform/xmodule/assets/word_cloud/_display.scss */ + .xmodule_display.xmodule_WordCloudBlock .input-cloud { + margin: calc((var(--baseline)/4)); } + /* line 10, /openedx/edx-platform/xmodule/assets/word_cloud/_display.scss */ + .xmodule_display.xmodule_WordCloudBlock .result_cloud_section { + display: none; + width: 0px; + height: 0px; } + /* line 16, /openedx/edx-platform/xmodule/assets/word_cloud/_display.scss */ + .xmodule_display.xmodule_WordCloudBlock .result_cloud_section.active { + display: block; + width: 100%; + height: auto; + margin-top: 1em; } + /* line 22, /openedx/edx-platform/xmodule/assets/word_cloud/_display.scss */ + .xmodule_display.xmodule_WordCloudBlock .result_cloud_section.active h3 { + font-size: 100%; } + /* line 27, /openedx/edx-platform/xmodule/assets/word_cloud/_display.scss */ + .xmodule_display.xmodule_WordCloudBlock .your_words { + font-size: 0.85em; + display: block; } diff --git a/xmodule/assets/WordCloudBlockDisplay.scss b/xmodule/assets/WordCloudBlockDisplay.scss deleted file mode 100644 index 884112a4804c..000000000000 --- a/xmodule/assets/WordCloudBlockDisplay.scss +++ /dev/null @@ -1,3 +0,0 @@ -.xmodule_display.xmodule_WordCloudBlock { - @import "word_cloud/display.scss"; -} diff --git a/xmodule/assets/annotatable/_display.scss b/xmodule/assets/annotatable/_display.scss deleted file mode 100644 index 9aaa8649c6c5..000000000000 --- a/xmodule/assets/annotatable/_display.scss +++ /dev/null @@ -1,197 +0,0 @@ -/* TODO: move top-level variables to a common _variables.scss. - * NOTE: These variables were only added here because when this was integrated with the CMS, - * SASS compilation errors were triggered because the CMS didn't have the same variables defined - * that the LMS did, so the quick fix was to localize the LMS variables not shared by the CMS. - * -Abarrett and Vshnayder - */ -@import 'bourbon/bourbon'; -@import 'lms/theme/variables'; -@import 'bootstrap/scss/variables'; -@import 'lms/theme/variables-v1'; - -$annotatable--border-color: var(--gray-l3); -$annotatable--body-font-size: em(14); - -.annotatable-wrapper { - position: relative; -} - -.annotatable-header { - margin-bottom: 0.5em; -} - -.annotatable-section { - position: relative; - padding: 0.5em 1em; - border: 1px solid $annotatable--border-color; - border-radius: 0.5em; - margin-bottom: 0.5em; - - &.shaded { background-color: #ededed; } - - .annotatable-section-title { - font-weight: bold; - a { font-weight: normal; } - } - - .annotatable-section-body { - border-top: 1px solid $annotatable--border-color; - margin-top: 0.5em; - padding-top: 0.5em; - - @include clearfix(); - } - - ul.instructions-template { - list-style: disc; - margin-left: 4em; - b { font-weight: bold; } - i { font-style: italic; } - - code { - display: inline; - white-space: pre; - font-family: Courier New, monospace; - } - } -} - -.annotatable-toggle { - position: absolute; - right: 0; - margin: 2px 1em 2px 0; - &.expanded::after { content: " \2191"; } - &.collapsed::after { content: " \2193"; } -} - -.annotatable-span { - @extend %ui-fake-link; - - display: inline; - - $highlight_index: 0; - - @each $highlight in ( - (yellow rgba(255, 255,10, 0.3) rgba(255, 255,10, 0.9)), - (red rgba(178,19,16,0.3) rgba(178,19,16,0.9)), - (orange rgba(255,165,0, 0.3) rgba(255,165,0, 0.9)), - (green rgba(25,255,132,0.3) rgba(25,255,132,0.9)), - (blue rgba(35,163,255,0.3) rgba(35,163,255,0.9)), - (purple rgba(115,9,178,0.3) rgba(115,9,178,0.9))) { - - $highlight_index: $highlight_index + 1; - $marker: nth($highlight, 1); - $color: nth($highlight, 2); - $selected_color: nth($highlight, 3); - - @if $highlight_index == 1 { - &.highlight { - background-color: $color; - &.selected { background-color: $selected_color; } - } - } - - &.highlight-#{$marker} { - background-color: $color; - &.selected { background-color: $selected_color; } - } - } - - &.hide { - cursor: none; - background-color: inherit; - - .annotatable-icon { - display: none; - } - } - - .annotatable-comment { - display: none; - } -} - -.ui-tooltip.qtip.ui-tooltip { - font-size: $annotatable--body-font-size; - border: 1px solid #333; - border-radius: 1em; - background-color: rgba(0, 0, 0, 0.85); - color: var(--white); - -webkit-font-smoothing: antialiased; - - .ui-tooltip-titlebar { - font-size: em(16); - color: inherit; - background-color: transparent; - padding: calc((var(--baseline)/4)) calc((var(--baseline)/2)); - border: none; - - .ui-tooltip-title { - padding: calc((var(--baseline)/4)) 0; - border-bottom: 2px solid #333; - font-weight: bold; - } - - .ui-tooltip-icon { - right: 10px; - background: #333; - } - - .ui-state-hover { - color: inherit; - border: 1px solid var(--gray-l3); - } - } - - .ui-tooltip-content { - color: inherit; - font-size: em(14); - text-align: left; - font-weight: 400; - padding: 0 calc((var(--baseline)/2)) calc((var(--baseline)/2)) calc((var(--baseline)/2)); - background-color: transparent; - border-color: transparent; - } - - p { - color: inherit; - line-height: normal; - } -} - -.ui-tooltip.qtip.ui-tooltip-annotatable { - max-width: 375px; - - .ui-tooltip-content { - padding: 0 calc((var(--baseline)/2)); - - .annotatable-comment { - display: block; - margin: 0 0 calc((var(--baseline)/2)) 0; - max-height: 225px; - overflow: auto; - line-height: normal; - } - - .annotatable-reply { - display: block; - border-top: 2px solid #333; - padding: calc((var(--baseline)/4)) 0; - margin: 0; - text-align: center; - } - } - - &::after { - content: ''; - display: inline-block; - position: absolute; - bottom: -20px; - left: 50%; - height: 0; - width: 0; - margin-left: calc(-1 * (var(--baseline) / 4)); - border: 10px solid transparent; - border-top-color: rgba(0, 0, 0, 0.85); - } -} diff --git a/xmodule/assets/capa/_display.scss b/xmodule/assets/capa/_display.scss deleted file mode 100644 index 0aba39f89925..000000000000 --- a/xmodule/assets/capa/_display.scss +++ /dev/null @@ -1,1747 +0,0 @@ -// capa - styling -// ==================== - -// Table of Contents -// * +Variables - Capa -// * +Extends - Capa -// * +Mixins - Status Icon - Capa -// * +Resets - Deprecate Please -// * +Problem - Base -// * +Problem - Choice Group -// * +Problem - Misc, Unclassified Mess -// * +Problem - Text Input, Numerical Input -// * +Problem - Option Input (Dropdown) -// * +Problem - CodeMirror -// * +Problem - Misc, Unclassified Mess Part 2 -// * +Problem - Rubric -// * +Problem - Annotation -// * +Problem - Choice Text Group -// * +Problem - Image Input Overrides -// * +Problem - Annotation Problem Overrides -@import 'vendor/bi-app/bi-app-ltr'; -@import 'bourbon/bourbon'; -@import 'lms/theme/variables'; -@import 'bootstrap/scss/variables'; -@import 'lms/theme/variables-v1'; - -// +Variables - Capa -// ==================== -$annotation-yellow: rgba(255, 255, 10, 0.3); -$color-copy-tip: rgb(100, 100, 100); - -// FontAwesome Icon code -// ==================== -$checkmark-icon: '\f00c'; // .fa-check -$cross-icon: '\f00d'; // .fa-close -$asterisk-icon: '\f069'; // .fa-asterisk - - -@import '../../../../../static/sass/edx-pattern-library-shims/base/variables'; - -// +Extends - Capa -// ==================== -// Duplicated from _mixins.scss due to xmodule compilation, inheritance issues -%use-font-awesome { - font-family: FontAwesome; - -webkit-font-smoothing: antialiased; - display: inline-block; - speak: none; -} - -// +Mixins - Status Icon - Capa -// ==================== -@mixin status-icon($color: var(--gray), $fontAwesomeIcon: "\f00d") { - .status-icon { - &::after { - @extend %use-font-awesome; - - color: $color; - font-size: 1.2em; - content: $fontAwesomeIcon; - } - } -} - -// +Resets - Deprecate Please -// ==================== -h2 { - margin-top: 0; - margin-bottom: calc((var(--baseline)*0.75)); - - &.problem-header { - display: inline-block; - - section.staff { - margin-top: calc((var(--baseline)*1.5)); - font-size: 80%; - } - } - - @media print { - display: block; - width: auto; - border-right: 0; - } -} - -.explanation-title { - font-weight: bold; -} - -%feedback-hint { - margin-top: calc((var(--baseline) / 4)); - - .icon { - @include margin-right(calc((var(--baseline) / 4))); - } -} - -.feedback-hint-incorrect { - @extend %feedback-hint; - - .icon { - color: var(--incorrect); - } -} - -.feedback-hint-partially-correct, -.feedback-hint-correct { - @extend %feedback-hint; - - .icon { - color: var(--correct); - } -} - -.feedback-hint-text { - color: $color-copy-tip; -} - -.problem-hint { - margin-bottom: 20px; - width: 100%; -} - -.hint-label { - display: inline-block; - padding-right: 0.5em; -} - -.hint-text { - display: inline-block; -} - -.feedback-hint-multi .hint-text { - display: block; -} - -iframe[seamless] { - overflow: hidden; - padding: 0; - border: 0 none transparent; - background-color: transparent; -} - -.inline-error { - color: var(--error-color-dark); -} - -div.problem-progress { - display: inline-block; - color: var(--gray-d1); - font-size: em(14); -} - -// +Problem - Base -// ==================== -div.problem { - padding-top: var(--baseline); - - @media print { - display: block; - padding: 0; - width: auto; - - canvas, - img { - page-break-inside: avoid; - } - } - - input.math { - direction: ltr; // Equations are always English - } - - .inline { - display: inline; - - + p { - margin-top: var(--baseline); - } - } - - .question-description { - color: var(--gray-d1); - font-size: var(--small-font-size); - } - - form > label, .problem-group-label { - display: block; - margin-bottom: var(--baseline); - font: inherit; - color: inherit; - -webkit-font-smoothing: initial; - } - - .problem-group-label + .question-description { - margin-top: calc(-1 * var(--baseline)); - } - -} - -// CAPA gap spacing between problem parts -// can not use the & + & since .problem is nested deeply in .xmodule_display.xmodule_CapaModule -.wrapper-problem-response + .wrapper-problem-response, -.wrapper-problem-response + p { - margin-top: calc((var(--baseline) * 1.5)); -} - -// Choice Group - silent class -%choicegroup-base { - @include clearfix(); - - min-width: 100px; - width: auto !important; - width: 100px; - - label { - box-sizing: border-box; - - display: inline-block; - clear: both; - margin-bottom: calc((var(--baseline)/2)); - border: 2px solid var(--gray-l4); - border-radius: 3px; - padding: calc((var(--baseline)/2)); - width: 100%; - - &::after { - @include margin-left(calc((var(--baseline)*0.75))); - } - } - - .indicator-container { - min-height: 1px; - width: 25px; - display: inline-block; - } - - fieldset { - box-sizing: border-box; - } - - input[type="radio"], - input[type="checkbox"] { - @include margin(calc((var(--baseline)/4))); - @include margin-right(calc((var(--baseline)/2))); - } - - input { - &:focus, - &:hover { - & + label { - border: 2px solid var(--blue); - } - } - - &, - &:focus, - &:hover { - & + label.choicegroup_correct { - @include status-icon(var(--correct), $checkmark-icon); - - border: 2px solid var(--correct); - } - - & + label.choicegroup_partially-correct { - @include status-icon(var(--partially-correct), $asterisk-icon); - - border: 2px solid var(--partially-correct); - } - - & + label.choicegroup_incorrect { - @include status-icon(var(--incorrect), $cross-icon); - - border: 2px solid var(--incorrect); - } - - & + label.choicegroup_submitted { - border: 2px solid var(--submitted); - } - } - } -} - -// +Problem - Choice Group -// ==================== -div.problem { - .choicegroup { - @extend %choicegroup-base; - - .field { - position: relative; - } - - label { - @include padding(calc((var(--baseline)/2))); - @include padding-left(calc((var(--baseline)*2.3))); - - position: relative; - font-size: var(--base-font-size); - line-height: normal; - cursor: pointer; - } - - input[type="radio"], - input[type="checkbox"] { - @include left(em(9)); - - position: absolute; - top: 0.35em; - width: calc(var(--baseline)*1.1); - height: calc(var(--baseline)*1.1); - z-index: 1; - } - - legend { - margin-bottom: var(--baseline); - max-width: 100%; - white-space: normal; - } - - legend + .question-description { - margin-top: calc(-1 * var(--baseline)); - max-width: 100%; - white-space: normal; - } - } -} - -// +Problem - Status Indicators -// ==================== -// Summary status indicators shown after the input area -div.problem { - .indicator-container { - @include margin-left(calc((var(--baseline)*0.75))); - - .status { - width: var(--baseline); - - // CASE: correct answer - &.correct { - @include status-icon(var(--correct), $checkmark-icon); - } - - // CASE: partially correct answer - &.partially-correct { - @include status-icon(var(--partially-correct), $asterisk-icon); - } - - // CASE: incorrect answer - &.incorrect { - @include status-icon(var(--incorrect), $cross-icon); - } - - &.submitted, - &.unsubmitted, - &.unanswered { - .status-icon { - content: ''; - } - } - } - } -} - -// +Problem - Misc, Unclassified Mess -// ==================== -div.problem { - ol.enumerate { - li { - &::before { - display: block; - visibility: hidden; - height: 0; - content: " "; - } - } - } - - .solution-span { - > span { - margin: var(--baseline) 0; - display: block; - position: relative; - - &:empty { - display: none; - } - } - } - - .targeted-feedback-span { - > span { - display: block; - position: relative; - - &:empty { - display: none; - } - } - } - - // known classes using this div: .indicator-container, moved to section above - div { - - // TO-DO: Styling used by advanced capa problem types. Should be synced up to use .status class - p { - &.answer { - margin-top: -2px; - } - - span.clarification i { - font-style: normal; - - &:hover { - color: var(--blue); - } - } - } - - &.correct, &.ui-icon-check { - input { - border-color: var(--correct); - } - } - - &.partially-correct, &.ui-icon-check { - input { - border-color: var(--partially-correct); - } - } - - &.processing { - input { - border-color: #aaa; - } - } - - &.ui-icon-close { - input { - border-color: var(--incorrect); - } - } - - &.incorrect, &.incomplete { - input { - border-color: var(--incorrect); - } - } - - &.submitted, &.ui-icon-check { - input { - border-color: var(--submitted); - } - } - - p.answer { - display: inline-block; - margin-top: calc((var(--baseline) / 2)); - margin-bottom: 0; - - &::before { - @extend %t-strong; - - display: inline; - content: "Answer: "; - - } - - &:empty { - &::before { - display: none; - } - } - } - - div.equation { - clear: both; - margin-top: 3px; - - .MathJax_Display { - width: auto; - } - - img.loading { - @include padding-left(calc((var(--baseline)/2))); - - display: inline-block; - } - - span { - margin-bottom: 0; - display: inline-block; - - &.MathJax_CHTML, &.MathJax, &.MathJax_SVG { - padding: 6px; - min-width: 30px; - border: 1px solid #e3e3e3; - border-radius: 4px; - background: #f1f1f1; - } - } - } - - // Hides equation previews in symbolic response problems when printing - [id^='display'].equation { - @media print { - display: none; - } - } - - //TO-DO: review and deprecate all these styles within span {} - span { - &.ui-icon-bullet { - display: inline-block; - position: relative; - top: 4px; - width: 14px; - height: 14px; - background: var(--icon-unanswered) center center no-repeat; - } - - &.processing, &.ui-icon-processing { - display: inline-block; - position: relative; - top: 6px; - width: 25px; - height: 20px; - background: var(--icon-spinner) center center no-repeat; - } - - &.ui-icon-check { - display: inline-block; - position: relative; - top: 3px; - width: 25px; - height: 20px; - background: var(--icon-correct) center center no-repeat; - } - - &.incomplete, &.ui-icon-close { - display: inline-block; - position: relative; - top: 3px; - width: 20px; - height: 20px; - background: var(--icon-incorrect) center center no-repeat; - } - } - - .reload { - @include float(right); - - margin: calc((var(--baseline)/2)); - } - - - .grader-status { - @include clearfix(); - - margin: calc(var(--baseline)/2) 0; - padding: calc(var(--baseline)/2); - border-radius: 5px; - background: var(--gray-l6); - - span { - display: block; - float: left; - overflow: hidden; - margin: -7px 7px 0 0; - text-indent: -9999px; - } - - .grading { - margin: 0px 7px 0 0; - padding-left: 25px; - background: var(--icon-info) left center no-repeat; - text-indent: 0px; - } - - p { - float: left; - margin-bottom: 0; - text-transform: capitalize; - line-height: 20px; - } - - &.file { - margin-top: var(--baseline); - padding: var(--baseline) 0 0 0; - border: 0; - border-top: 1px solid #eee; - background: var(--white); - - p.debug { - display: none; - } - - input { - float: left; - } - } - - } - - .evaluation { - p { - margin-bottom: calc((var(--baseline)/5)); - } - } - - - .feedback-on-feedback { - margin-right: var(--baseline); - height: 100px; - } - - .evaluation-response { - header { - text-align: right; - - a { - font-size: .85em; - } - } - } - - .evaluation-scoring { - .scoring-list { - margin-left: 3px; - list-style-type: none; - - li { - display:inline; - margin-left: 50px; - - &:first-child { - margin-left: 0; - } - - label { - font-size: .9em; - } - } - } - } - - .submit-message-container { - margin: var(--baseline) 0px ; - } - } - - div.inline { - > span { - display: inline; - } - } - - ul { - margin-bottom: lh(); - margin-left: .75em; - margin-left: .75rem; - list-style: disc outside none; - } - - ol { - margin-bottom: lh(); - margin-left: .75em; - margin-left: .75rem; - list-style: decimal outside none; - } - - dl { - line-height: 1.4em; - } - - dl dt { - @extend %t-strong; - - } - - dl dd { - margin-bottom: 0; - } - - dd { - margin-left: .5em; - margin-left: .5rem; - } - - li { - margin-bottom: lh(0.5); - line-height: 1.4em; - - &:last-child { - margin-bottom: 0; - } - } - - p { - margin-bottom: lh(); - } - - table { - margin: lh() 0; - border-collapse: collapse; - table-layout: auto; - - td, th { - &.cont-justified-left { - text-align: left !important; // nasty, but needed to override the bad specificity of the xmodule css selectors - } - - &.cont-justified-right { - text-align: right !important; // nasty, but needed to override the bad specificity of the xmodule css selectors - } - - &.cont-justified-center { - text-align: center !important; // nasty, but needed to override the bad specificity of the xmodule css selectorsstyles - } - } - - th { - @extend %t-strong; - - text-align: left; - } - - td { - text-align: left; - } - - caption, th, td { - padding: .25em .75em .25em 0; - padding: .25rem .75rem .25rem 0; - } - - caption { - margin-bottom: .75em; - margin-bottom: .75rem; - padding: .75em 0; - padding: .75rem 0; - background: #f1f1f1; - } - - tr, td, th { - vertical-align: middle; - } - } - - code { - margin: 0 2px; - padding: 0px 5px; - border: 1px solid #eaeaea; - border-radius: 3px; - background-color: var(--gray-l6); - white-space: nowrap; - font-size: .9em; - } - - pre { - overflow: auto; - padding: 6px calc(var(--baseline)/2); - border: 1px solid var(--gray-l3); - border-radius: 3px; - background-color: var(--gray-l6); - font-size: .9em; - line-height: 1.4; - - > code { - margin: 0; - padding: 0; - border: none; - background: transparent; - white-space: pre; - } - } -} - -// +Problem - Text Input, Numerical Input -// ==================== -.problem { - .capa_inputtype.textline, .inputtype.formulaequationinput { - input { - box-sizing: border-box; - - border: 2px solid var(--gray-l4); - border-radius: 3px; - min-width: 160px; - height: 46px; - } - - .status { - display: inline-block; - margin-top: calc((var(--baseline)/2)); - background: none; - } - - // CASE: incorrect answer - > .incorrect { - input { - border: 2px solid var(--incorrect); - } - - .status { - @include status-icon(var(--incorrect), $cross-icon); - } - } - - // CASE: partially correct answer - > .partially-correct { - input { - border: 2px solid var(--partially-correct); - } - - .status { - @include status-icon(var(--partially-correct), $asterisk-icon); - } - } - - // CASE: correct answer - > .correct { - input { - border: 2px solid var(--correct); - } - - .status { - @include status-icon(var(--correct), $checkmark-icon); - } - } - - // CASE: submitted, correctness withheld - > .submitted { - input { - border: 2px solid var(--submitted); - } - - .status { - content: ''; - } - } - - // CASE: unanswered and unsubmitted - > .unanswered, > .unsubmitted { - input { - border: 2px solid var(--gray-l4); - } - - .status { - .status-icon { - &::after { - content: ''; - display: inline-block; - } - } - } - } - - } - - .inputtype.formulaequationinput { - > div { - input { - direction: ltr; - @include text-align(left); - } - } - } - - .trailing_text { - @include margin-right(calc((var(--baseline)/2))); - - display: inline-block; - } -} - - -// +Problem - Option Input (Dropdown) -// ==================== -.problem { - .inputtype.option-input { - margin: 0 0 0 0 !important; - - .indicator-container { - display: inline-block; - - .status.correct::after, - .status.partially-correct::after, - .status.incorrect::after, - .status.submitted::after, - .status.unanswered::after { - @include margin-left(0); - } - } - } -} - -// +Problem - CodeMirror -// ==================== -div.problem { - .CodeMirror { - border: 1px solid black; - font-size: 14px; - line-height: 18px; - resize: none; - - .cm-tab { - background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAMCAYAAAAkuj5RAAAAAXNSR0IArs4c6QAAAGFJREFUSMft1LsRQFAQheHPowAKoACx3IgEKtaEHujDjORSgWTH/ZOdnZOcM/sgk/kFFWY0qV8foQwS4MKBCS3qR6ixBJvElOobYAtivseIE120FaowJPN75GMu8j/LfMwNjh4HUpwg4LUAAAAASUVORK5CYII=); - background-position: right; - background-repeat: no-repeat; - } - - pre { - overflow: hidden; - margin: 0; - padding: 0; - border-width: 0; - border-radius: 0; - background: transparent; - white-space: pre; - word-wrap: normal; - font-size: inherit; - font-family: inherit; - resize: none; - - &.CodeMirror-cursor { - @extend %ui-depth1; - - position: absolute; - visibility: hidden; - width: 0; - border-right: none; - border-left: 1px solid var(--black); - } - } - } - - .CodeMirror-focused pre.CodeMirror-cursor { - visibility: visible; - } - - .CodeMirror-code pre { - width: -webkit-fit-content; - width: -moz-fit-content; - width: fit-content; - } - - .CodeMirror-scroll { - margin-right: 0px; - } -} - -.capa-message { - display: inline-block; - color: var(--gray-d1); - -webkit-font-smoothing: antialiased; -} - -// +Problem - Actions -// ==================== -div.problem .action { - min-height: var(--baseline); - width: 100%; - display: flex; - display: -ms-flexbox; - -ms-flex-align: start; - flex-direction: row; - align-items: center; - flex-wrap: wrap; - - .problem-action-buttons-wrapper { - display: inline-flex; - justify-content: flex-end; - width: 100%; - padding-bottom: var(--baseline); - } - - .problem-action-button-wrapper { - @include border-right(1px solid var(--gray-300)); - @include padding(0, 13px); // to create a 26px gap, which is an a11y recommendation - - display: inline-block; - - &:last-child { - border: none; - padding-right: 0; - } - } - - .problem-action-btn { - border: none; - max-width: 110px; - - &:hover, - &:focus, - &:active { - color: var(--primary) !important; - } - - .icon { - margin-bottom: calc(var(--baseline) / 10); - display: block; - } - - @media print { - display: none; - } - } - - .submit-attempt-container { - padding-bottom: var(--baseline); - flex-grow: 1; - display: flex; - align-items: center; - - @media (max-width: var(--bp-screen-lg)) { - max-width: 100%; - padding-bottom: var(--baseline); - } - - .submit { - @include margin-right(calc((var(--baseline) / 2))); - @include float(left); - - white-space: nowrap; - } - - .submit-cta-description { - color: var(--primary); - font-size: small; - padding-right: calc(var(--baseline) / 2); - } - .submit-cta-link-button { - color: var(--primary); - padding-right: calc(var(--baseline) / 4); - } - } - - .submission-feedback { - @include margin-right(calc((var(--baseline) / 2))); - - margin-top: calc(var(--baseline) / 2); - display: inline-block; - color: var(--gray-d1); - font-size: var(--medium-font-size); - -webkit-font-smoothing: antialiased; - vertical-align: middle; - - &.cta-enabled { - margin-top: 0; - } - } -} - - -// +Problem - Misc, Unclassified Mess Part 2 -// ==================== -div.problem { - hr { - float: none; - clear: both; - margin: 0 0 .75rem; - width: 100%; - height: 1px; - border: none; - background: #ddd; - color: #ddd; - } - - .hidden { - display: none; - visibility: hidden; - } - - #{$all-text-inputs} { - display: inline; - width: auto; - } - - // this supports a deprecated element and should be removed once the center tag is removed - center { - display: block; - margin: lh() 0; - padding: lh(); - border: 1px solid var(--gray-l3); - } - - .message { - font-size: inherit; - } - - .detailed-solution > p { - margin: 0; - - &:first-child { - @extend %t-strong; - - margin-bottom: 0; - } - - } - - .detailed-targeted-feedback, - .detailed-targeted-feedback-partially-correct, - .detailed-targeted-feedback-correct { - > p { - margin: 0; - font-weight: normal; - - &:first-child { - @extend %t-strong; - } - } - } - - div.capa_alert { - margin-top: var(--baseline); - padding: 8px 12px; - border: 1px solid var(--warning-color); - border-radius: 3px; - background: var(--warning-color-accent); - font-size: 0.9em; - } - - .notification { - @include float(left); - - margin-top: calc(var(--baseline) / 2); - padding: calc((var(--baseline) / 2.5)) calc((var(--baseline) / 2)) calc((var(--baseline) / 5)) calc((var(--baseline) / 2)); - line-height: var(--base-line-height); - - &.success { - @include notification-by-type(var(--success)); - } - - &.error { - @include notification-by-type(var(--danger)); - } - - &.warning { - @include notification-by-type(var(--warning)); - } - - &.general { - @include notification-by-type(var(--general-color-accent)); - } - - &.problem-hint { - border: 1px solid var(--uxpl-gray-background); - border-radius: 6px; - - .icon { - @include margin-right(calc(3 * var(--baseline) / 4) ); - - color: var(--uxpl-gray-dark); - } - - li { - color: var(--uxpl-gray-base); - - strong { - color: var(--uxpl-gray-dark); - } - } - } - - .icon { - @include float(left); - - position: relative; - top: calc(var(--baseline) / 5); - } - - .notification-message { - display: inline-block; - width: flex-grid(7,10); - // Make notification tall enough that when the "Review" button is displayed, - // the notification does not grow in height. - margin-bottom: 8px; - - ol { - list-style: none outside none; - padding: 0; - margin: 0; - - li:not(:last-child) { - margin-bottom: calc(var(--baseline) / 4); - } - } - } - - .notification-btn-wrapper { - @include float(right); - } - - } - - .notification-btn { - @include float(right); - - padding: calc((var(--baseline) / 10)) calc((var(--baseline) / 4)); - min-width: calc((var(--baseline) * 3)); - display: block; - clear: both; - - &:first-child { - margin-bottom: calc(var(--baseline) / 4); - } - } - - // override default button hover - button { - &:hover { - background-image: none; - box-shadow: none; - } - - &:focus { - box-shadow: none; - } - - &.btn-default { - background-color: transparent; - } - - &.btn-brand { - &:hover { - background-color: var(--btn-brand-focus-background); - } - } - } - - .review-btn { - color: var(--blue); // notification type has other colors - &.sr { - color: var(--blue); - } - } - - div.capa_reset { - padding: 25px; - background-color: var(--error-color-light); - border: 1px solid var(--error-color); - border-radius: 3px; - font-size: 1em; - margin-top: calc(var(--baseline)/2); - margin-bottom: calc(var(--baseline)/2); - } - - .capa_reset>h2 { - color: #a00; - } - - .capa_reset li { - font-size: 0.9em; - } - - .hints { - border: 1px solid var(--gray-l3); - - h3 { - @extend %t-strong; - - padding: 9px; - border-bottom: 1px solid #e3e3e3; - background: #eee; - text-shadow: 0 1px 0 var(--white); - font-size: em(16); - } - - div { - border-bottom: 1px solid #ddd; - - &:last-child { - border-bottom: none; - } - - p { - margin-bottom: 0; - } - - header { - a { - display: block; - padding: 9px; - background: var(--gray-l6); - box-shadow: inset 0 0 0 1px var(--white); - } - } - - > section { - padding: 9px; - } - } - } - - .test { - padding-top: 18px; - - header { - margin-bottom: 12px; - - h3 { - @extend %t-strong; - - color: #aaa; - font-style: normal; - font-size: 0.9em; - } - } - - > section { - position: relative; - margin-bottom: calc((var(--baseline)/2)); - padding: 9px 9px var(--baseline); - border: 1px solid #ddd; - border-radius: 3px; - background: var(--white); - box-shadow: inset 0 0 0 1px #eee; - - p:last-of-type { - margin-bottom: 0; - } - - .shortform { - margin-bottom: .6em; - } - - a.full { - @include position(absolute, 0 0 1px 0); - box-sizing: border-box; - - display: block; - padding: calc((var(--baseline)/5)); - background: var(--gray-l4); - text-align: right; - font-size: 1em; - - &.full-top { - @include position(absolute, 1px 0 auto 0); - } - - &.full-bottom { - @include position(absolute, auto 0 1px 0); - } - } - } - } - - .external-grader-message { - section { - padding-top: calc((var(--baseline)*1.5)); - padding-left: var(--baseline); - background-color: #fafafa; - color: #2c2c2c; - font-size: 1em; - font-family: monospace; - - header { - font-size: 1.4em; - } - - .shortform { - @extend %t-strong; - } - - .longform { - margin: 0; - padding: 0; - - .result-errors { - margin: calc((var(--baseline)/4)); - padding: calc((var(--baseline)/2)) calc((var(--baseline)/2)) calc((var(--baseline)/2)) calc((var(--baseline)*2)); - background: var(--icon-incorrect) center left no-repeat; - - li { - color: #b00; - } - } - - .result-output { - margin: calc(var(--baseline)/4); - padding: var(--baseline) 0 calc((var(--baseline)*0.75)) 50px; - border-top: 1px solid #ddd; - border-left: var(--baseline) solid #fafafa; - - h4 { - font-size: 1em; - font-family: monospace; - } - - dl { - margin: 0; - } - - dt { - margin-top: var(--baseline); - } - - dd { - margin-left: 24pt; - } - } - - .result-correct { - background: var(--icon-correct) left 20px no-repeat; - - .result-actual-output { - color: #090; - } - } - - .result-partially-correct { - background: var(--icon-partially-correct) left 20px no-repeat; - - .result-actual-output { - color: #090; - } - } - - .result-incorrect { - background: var(--icon-incorrect) left 20px no-repeat; - - .result-actual-output { - color: #b00; - } - } - - .markup-text{ - margin: calc((var(--baseline)/4)); - padding: var(--baseline) 0 15px 50px; - border-top: 1px solid #ddd; - border-left: 20px solid #fafafa; - - bs { - color: #b00; - } - - bg { - color: #bda046; - } - } - } - } - } -} - - -// +Problem - Rubric -// ==================== -div.problem { - .rubric { - tr { - margin: calc((var(--baseline)/2)) 0; - height: 100%; - } - - td { - margin: calc((var(--baseline)/2)) 0; - padding: var(--baseline) 0; - height: 100%; - } - - th { - margin: calc((var(--baseline)/4)); - padding: calc((var(--baseline)/4)); - } - - label, - .view-only { - position: relative; - display: inline-block; - margin: 3px; - padding: calc((var(--baseline)*0.75)); - min-width: 50px; - min-height: 50px; - width: 150px; - height: 100%; - background-color: var(--gray-l3); - font-size: .9em; - } - - .grade { - position: absolute; - right: 0; - bottom: 0; - margin: calc((var(--baseline)/2)); - } - - .selected-grade { - background: #666; - color: white; - } - - input[type=radio]:checked + label { - background: #666; - color: white; - } - - input[class='score-selection'] { - display: none; - } - } -} - -// +Problem - Annotation -// ==================== -div.problem { - .annotation-input { - margin: 0 0 1em 0; - border: 1px solid var(--gray-l3); - border-radius: 1em; - - .annotation-header { - @extend %t-strong; - - padding: .5em 1em; - border-bottom: 1px solid var(--gray-l3); - } - - .annotation-body { padding: .5em 1em; } - - a.annotation-return { - float: right; - font: inherit; - font-weight: normal; - } - - a.annotation-return::after { content: " \2191" } - - .block, ul.tags { - margin: .5em 0; - padding: 0; - } - - .block-highlight { - padding: .5em; - border: 1px solid darken($annotation-yellow, 10%); - background-color: $annotation-yellow; - color: #333; - font-style: normal; - } - - .block-comment { font-style: italic; } - - ul.tags { - display: block; - margin-left: 1em; - list-style-type: none; - - li { - position: relative; - display: block; - margin: 1em 0 0 0; - - .tag { - @extend %ui-fake-link; - - display: inline-block; - margin-left: calc((var(--baseline)*2)); - border: 1px solid rgb(102,102,102); - - &.selected { - background-color: $annotation-yellow; - } - } - - .tag-status { - position: absolute; - left: 0; - } - .tag-status, .tag { padding: .25em .5em; } - } - } - - textarea.comment { - $num-lines-to-show: 5; - $line-height: 1.4em; - $padding: .2em; - - padding: $padding (2 * $padding); - width: 100%; - height: ($num-lines-to-show * $line-height) + (2*$padding) - (($line-height - 1)/2); - line-height: $line-height; - } - - .answer-annotation { display: block; margin: 0; } - - /* for debugging the input value field. enable the debug flag on the inputtype */ - .debug-value { - margin: 1em 0; - padding: 1em; - border: 1px solid var(--black); - background-color: #999; - color: var(--white); - - input[type="text"] { width: 100%; } - - pre { background-color: var(--gray-l3); color: var(--black); } - - &::before { - @extend %t-strong; - - display: block; - content: "debug input value"; - font-size: 1.5em; - } - } - } -} - -// +Problem - Choice Text Group -// ==================== -div.problem { - .choicetextgroup { - @extend %choicegroup-base; - - input[type="text"]{ - margin-bottom: 0.5em; - } - - label.choicetextgroup_correct, section.choicetextgroup_correct { - @extend label.choicegroup_correct; - - input[type="text"] { - border-color: var(--correct); - } - } - - label.choicetextgroup_partially-correct, section.choicetextgroup_partially-correct { - @extend label.choicegroup_partially-correct; - - input[type="text"] { - border-color: var(--partially-correct); - } - } - - label.choicetextgroup_incorrect, section.choicetextgroup_incorrect { - @extend label.choicegroup_incorrect; - } - - label.choicetextgroup_submitted, section.choicetextgroup_submitted { - @extend label.choicegroup_submitted; - } - - label.choicetextgroup_show_correct, section.choicetextgroup_show_correct { - &::after { - @include margin-left(calc((var(--baseline)*0.75))); - - content: var(--icon-correct); - } - } - - span.mock_label { - cursor : default; - } - } -} - -// +Problem - Image Input Overrides -// ==================== - -// NOTE: temporary override until image inputs use same base html structure as other common capa input types. -div.problem .imageinput.capa_inputtype { - .status { - display: inline-block; - position: relative; - top: 3px; - width: 25px; - height: 20px; - - &.unsubmitted, - &.unanswered { - .status-icon { - content: ''; - } - - .status-message { - display: none; - } - } - } - - .correct { - @include status-icon(var(--correct), $checkmark-icon); - } - - .incorrect { - @include status-icon(var(--incorrect), $cross-icon); - } - - .partially-correct { - @include status-icon(var(--partially-correct), $asterisk-icon); - } - - .submitted { - content: ''; - } -} - -// +Problem - Annotation Problem Overrides -// ==================== - -// NOTE: temporary override until annotation problem inputs use same base html structure as other common capa input types. -div.problem .annotation-input { - .tag-status { - display: inline-block; - position: relative; - top: 3px; - width: 25px; - height: 20px; - - &.unsubmitted, - &.unanswered { - .status-icon { - content: ''; - } - - .status-message { - display: none; - } - } - } - - .correct { - @include status-icon(var(--correct), $checkmark-icon); - } - - .incorrect { - @include status-icon(var(--incorrect), $cross-icon); - } - - .partially-correct { - @include status-icon(var(--partially-correct), $asterisk-icon); - } - - .submitted { - content: ''; - } -} - -// Loading Spinner -// ==================== -.problems-wrapper .loading-spinner { - text-align: center; - color: var(--gray-d1); -} diff --git a/xmodule/assets/codemirror/_codemirror.scss b/xmodule/assets/codemirror/_codemirror.scss deleted file mode 100644 index bf60ea6a49aa..000000000000 --- a/xmodule/assets/codemirror/_codemirror.scss +++ /dev/null @@ -1,5 +0,0 @@ -.CodeMirror { - background: #fff; - font-size: 13px; - color: #3c3c3c; -} diff --git a/xmodule/assets/editor/_edit.scss b/xmodule/assets/editor/_edit.scss deleted file mode 100644 index 9ecd31416ced..000000000000 --- a/xmodule/assets/editor/_edit.scss +++ /dev/null @@ -1,83 +0,0 @@ -@import 'vendor/bi-app/bi-app-ltr'; -@import 'bourbon/bourbon'; -@import 'lms/theme/variables'; -@import 'bootstrap/scss/variables'; -@import 'cms/theme/variables-v1'; -@import 'mixins'; - -// This is shared CSS between the xmodule problem editor and the xmodule HTML editor. -.editor { - position: relative; - - .row { - position: relative; - } - - .editor-bar { - @include clearfix(); - @include linear-gradient(top, #d4dee8, #c9d5e2); - - position: relative; - padding: calc((var(--baseline)/4)); - border-bottom-color: #a5aaaf; - - button { - display: inline-block; - - @include float(left); - - padding: 3px calc((var(--baseline)/2)) 5px; - margin-left: 7px; - border: 0; - border-radius: 2px; - background: transparent; - - .icon { - height: 21px; - } - - &:hover, - &:focus { - background: rgba(255, 255, 255, .5); - } - } - } - - .editor-tabs { - position: absolute; - top: 10px; - - @include right(10px); - @include text-align(left); - @include direction(); - - li { - @include float(left); - @include margin-right(calc((var(--baseline)/4))); - - &:last-child { - @include margin-right(0); - } - } - - .tab { - display: block; - height: 24px; - padding: 7px 20px 3px; - border: 1px solid #a5aaaf; - border-radius: 3px 3px 0 0; - - @include linear-gradient(top, var(--transparent) 87%, rgba(0, 0, 0, .06)); - - background-color: #e5ecf3; - font-size: 13px; - color: #3c3c3c; - box-shadow: 1px -1px 1px rgba(0, 0, 0, .05); - - &.current { - background: var(--white); - border-bottom-color: var(--white); - } - } - } -} diff --git a/xmodule/assets/html/_display.scss b/xmodule/assets/html/_display.scss deleted file mode 100644 index beceaa1d0119..000000000000 --- a/xmodule/assets/html/_display.scss +++ /dev/null @@ -1,318 +0,0 @@ -@import 'vendor/bi-app/bi-app-ltr'; -@import 'bourbon/bourbon'; -@import 'lms/theme/variables'; -@import 'bootstrap/scss/variables'; -@import 'lms/theme/variables-v1'; - -// HTML component display: -* { - line-height: 1.4em; -} - -h1 { - color: var(--body-color); - font: normal 2em/1.4em var(--font-family-sans-serif); - letter-spacing: 1px; - - @include margin(0, 0, 1.416em, 0); -} - -h2 { - color: #646464; - font: normal 1.2em/1.2em var(--font-family-sans-serif); - letter-spacing: 1px; - margin-bottom: calc((var(--baseline)*0.75)); - -webkit-font-smoothing: antialiased; -} - -h3, -h4, -h5, -h6 { - @include margin(0, 0, calc((var(--baseline)/2)), 0); - - font-weight: 600; -} - -h3 { - font-size: 1.2em; -} - -h4 { - font-size: 1em; -} - -h5 { - font-size: 0.83em; -} - -h6 { - font-size: 0.75em; -} - -p { - margin-bottom: 1.416em; - font-size: 1em; - line-height: 1.6em !important; - color: var(--body-color); -} - -em, -i { - font-style: italic; - - span { - font-style: italic; - } -} - -strong, -b { - font-weight: bold; - - span { - font-weight: bold; - } -} - -p + p, -ul + p, -ol + p { - margin-top: var(--baseline); -} - -blockquote { - margin: 1em calc((var(--baseline)*2)); -} - -ol, -ul { - // Using the lower level Bi App Sass mixin to avoid @padding conflicts with bourbon. - @include bi-app-compact(padding, 0, 0, 0, 1em); - - margin: 1em 0; - color: var(--body-color); - - li { - margin-bottom: 0.708em; - } -} - -ol { - list-style: decimal outside none; -} - -ul { - list-style: disc outside none; -} - -a { - &:link, - &:visited, - &:hover, - &:active, - &:focus { - color: var(--blue); - } -} - -img { - max-width: 100%; -} - -pre { - margin: 1em 0; - color: var(--body-color); - font-family: monospace, serif; - font-size: 1em; - white-space: pre-wrap; - word-wrap: break-word; -} - -code { - color: var(--body-color); - font-family: monospace, serif; - background: none; - padding: 0; -} - -table { - width: 100%; - margin: var(--baseline) 0; - border-collapse: collapse; - font-size: 16px; - - td, - th { - margin: var(--baseline) 0; - padding: calc((var(--baseline)/2)); - border: 1px solid var(--gray-l3); - font-size: 14px; - - &.cont-justified-left { - text-align: left !important; // nasty, but needed to override the bad specificity of the xmodule css selectors - } - - &.cont-justified-right { - text-align: right !important; // nasty, but needed to override the bad specificity of the xmodule css selectors - } - - &.cont-justified-center { - text-align: center !important; // nasty, but needed to override the bad specificity of the xmodule css selectorsstyles - } - } -} - -th { - background: #eee; - font-weight: bold; -} - - -// image modal -// -------------------- - -// modal - image zoom, fill window -.wrapper-modal-image { - .modal-ui-icon { - @extend %ui-fake-link; - - position: absolute; - display: block; - padding: calc((var(--baseline)/4)) 7px; - border-radius: 5px; - opacity: 0.9; - background: var(--white); - color: var(--black); - border: 2px solid var(--black); - - .label { - font-weight: bold; - } - - i { - font-style: normal; - } - } - - .image-link { - @extend %ui-fake-link; - - position: relative; - display: block; - - .action-fullscreen { - display: none; - top: 10px; - left: 10px; - } - - &:hover .action-fullscreen { - display: block; - } - } - - .image-modal { - @extend %ui-fake-link; - @extend %ui-depth5; - - position: fixed; - top: 0; - left: 0; - display: none; - height: 100%; - width: 100%; - background-color: rgba(0, 0, 0, 0.7); - - .image-content { - position: relative; - top: 2.5%; - display: block; - height: 95%; - width: 95%; - margin: auto; - overflow: hidden; - - .image-wrapper { - position: relative; - - img { - position: relative; - display: block; - max-width: 100%; - max-height: 100%; - margin: auto; - cursor: default; - } - } - - .action-close { - top: 10px; - right: 10px; - } - - .image-controls { - position: absolute; - right: 10px; - bottom: 10px; - margin: 0; - padding: 0; - list-style: none; - - .image-control { - position: relative; - display: inline-block; - margin: 0; - padding: 0; - - .modal-ui-icon { - position: relative; - - &.action-zoom-in { - margin-right: calc((var(--baseline)/4)); - } - - &.action-zoom-out { - margin-left: calc((var(--baseline)/4)); - } - - &.is-disabled { - opacity: 0.5; - cursor: default; - } - } - } - } - } - - &.image-is-fit-to-screen { - display: block; - - // !important used here to override jQuery. - .image-content .image-wrapper { - top: 0 !important; - left: 0 !important; - width: 100% !important; - height: 100% !important; - - img { - top: 0 !important; - left: 0 !important; - } - } - } - - &.image-is-zoomed { - display: block; - - .image-content .image-wrapper { - img { - max-width: none; - max-height: none; - margin: 0; - cursor: move; - } - } - } - } -} diff --git a/xmodule/assets/html/_edit.scss b/xmodule/assets/html/_edit.scss deleted file mode 100644 index bf47a0f5d372..000000000000 --- a/xmodule/assets/html/_edit.scss +++ /dev/null @@ -1,14 +0,0 @@ -// HTML component editor: -.html-editor { - @include clearfix(); - - .CodeMirror { - box-sizing: border-box; - - height: 435px; - } - - .is-inactive { - display: none; - } -} diff --git a/xmodule/assets/lti/_lti.scss b/xmodule/assets/lti/_lti.scss deleted file mode 100644 index 9eee710f0dad..000000000000 --- a/xmodule/assets/lti/_lti.scss +++ /dev/null @@ -1,65 +0,0 @@ -@import 'bourbon/bourbon'; -@import 'lms/theme/variables'; -@import 'bootstrap/scss/variables'; -@import 'lms/theme/variables-v1'; -@import 'base/mixins'; - -h2.problem-header { - display: inline-block; -} - -div.problem-progress { - display: inline-block; - padding-left: calc((var(--baseline)/4)); - color: #666; - font-weight: 100; - font-size: em(16); -} - - -div.lti { - // align center - margin: 0 auto; - - .wrapper-lti-link { - @include font-size(14); - - background-color: var(--sidebar-color); - padding: var(--baseline); - - .lti-link { - margin-bottom: 0; - text-align: right; - - .link_lti_new_window { - @extend .gray-button; - - @include font-size(13); - @include line-height(14); - } - } - } - - form.ltiLaunchForm { - display: none; - } - - iframe.ltiLaunchFrame { - width: 100%; - height: 800px; - display: block; - border: 0px; - } - - h4.problem-feedback-label { - font-weight: 100; - font-size: em(16); - font-family: "Source Sans", "Open Sans", Verdana, Geneva, sans-serif, sans-serif; - } - - div.problem-feedback { - margin-top: calc((var(--baseline)/4)); - margin-bottom: calc((var(--baseline)/4)); - - } -} diff --git a/xmodule/assets/poll/_display.scss b/xmodule/assets/poll/_display.scss deleted file mode 100644 index 7c9b21bf205e..000000000000 --- a/xmodule/assets/poll/_display.scss +++ /dev/null @@ -1,226 +0,0 @@ -@import 'bourbon/bourbon'; -@import 'lms/theme/variables'; -@import 'bootstrap/scss/variables'; -@import 'lms/theme/variables-v1'; - -div.poll_question { - @media print { - display: block; - width: auto; - padding: 0; - - canvas, img { - page-break-inside: avoid; - } - } - - .inline { - display: inline; - } - - h3 { - margin-top: 0; - margin-bottom: calc((var(--baseline)*0.75)); - color: #fe57a1; - font-size: 1.9em; - - &.problem-header { - div.staff { - margin-top: calc((var(--baseline)*1.5)); - font-size: 80%; - } - } - - @media print { - display: block; - width: auto; - border-right: 0; - } - } - - p { - text-align: justify; - font-weight: bold; - } - - .poll_answer { - margin-bottom: var(--baseline); - - &.short { - clear: both; - } - - .question { - height: auto; - clear: both; - min-height: 30px; - - &.short { - clear: none; - width: 30%; - display: inline; - float: left; - } - - .button { - @extend %ui-fake-link; - - -webkit-appearance: none; - -webkit-background-clip: padding-box; - -webkit-border-image: none; - -webkit-box-align: center; - -webkit-box-shadow: rgb(255, 255, 255) 0px 1px 0px 0px inset; - -webkit-font-smoothing: antialiased; - -webkit-rtl-ordering: logical; - -webkit-user-select: text; - -webkit-writing-mode: horizontal-tb; - background-clip: padding-box; - background-color: rgb(238, 238, 238); - background-image: -webkit-linear-gradient(top, rgb(238, 238, 238), rgb(210, 210, 210)); - border-bottom-color: rgb(202, 202, 202); - border-bottom-left-radius: 3px; - border-bottom-right-radius: 3px; - border-bottom-style: solid; - border-bottom-width: 1px; - border-left-color: rgb(202, 202, 202); - border-left-style: solid; - border-left-width: 1px; - border-right-color: rgb(202, 202, 202); - border-right-style: solid; - border-right-width: 1px; - border-top-color: rgb(202, 202, 202); - border-top-left-radius: 3px; - border-top-right-radius: 3px; - border-top-style: solid; - border-top-width: 1px; - box-shadow: rgb(255, 255, 255) 0px 1px 0px 0px inset; - box-sizing: border-box; - color: rgb(51, 51, 51); - - /* display: inline-block; */ - display: inline; - float: left; - font-family: 'Open Sans', Verdana, Geneva, sans-serif; - font-size: 13px; - font-style: normal; - font-variant: normal; - font-weight: bold; - letter-spacing: normal; - line-height: 25.59375px; - margin-bottom: calc((var(--baseline)*0.75)); - margin: 0; - padding: 0px; - text-align: center; - text-decoration: none; - text-indent: 0px; - text-shadow: rgb(248, 248, 248) 0px 1px 0px; - text-transform: none; - vertical-align: top; - white-space: pre-line; - width: 25px; - height: 25px; - word-spacing: 0px; - writing-mode: lr-tb; - } - - .button.answered { - -webkit-box-shadow: rgb(97, 184, 225) 0px 1px 0px 0px inset; - background-color: rgb(29, 157, 217); - background-image: -webkit-linear-gradient(top, rgb(29, 157, 217), rgb(14, 124, 176)); - border-bottom-color: rgb(13, 114, 162); - border-left-color: rgb(13, 114, 162); - border-right-color: rgb(13, 114, 162); - border-top-color: rgb(13, 114, 162); - box-shadow: rgb(97, 184, 225) 0px 1px 0px 0px inset; - color: rgb(255, 255, 255); - text-shadow: rgb(7, 103, 148) 0px 1px 0px; - background-image: none; - } - - .text { - @extend %ui-fake-link; - - display: inline; - float: left; - width: 80%; - text-align: left; - min-height: 30px; - margin-left: var(--baseline); - height: auto; - margin-bottom: var(--baseline); - - &.short { - width: 100px; - } - } - } - - .stats { - min-height: 40px; - margin-top: var(--baseline); - clear: both; - - &.short { - margin-top: 0; - clear: none; - display: inline; - float: right; - width: 70%; - } - - .bar { - width: 75%; - height: 20px; - border: 1px solid black; - display: inline; - float: left; - margin-right: calc((var(--baseline)/2)); - - &.short { - width: 65%; - height: 20px; - margin-top: 3px; - } - - .percent { - background-color: gray; - width: 0; - height: 20px; - - &.short { } - } - } - - .number { - width: 80px; - display: inline; - float: right; - height: 28px; - text-align: right; - - &.short { - width: 120px; - height: auto; - } - } - } - } - - .poll_answer.answered { - -webkit-box-shadow: rgb(97, 184, 225) 0 1px 0 0 inset; - background-color: rgb(29, 157, 217); - background-image: -webkit-linear-gradient(top, rgb(29, 157, 217), rgb(14, 124, 176)); - border-bottom-color: rgb(13, 114, 162); - border-left-color: rgb(13, 114, 162); - border-right-color: rgb(13, 114, 162); - border-top-color: rgb(13, 114, 162); - box-shadow: rgb(97, 184, 225) 0 1px 0 0 inset; - color: rgb(255, 255, 255); - text-shadow: rgb(7, 103, 148) 0 1px 0; - } - - .button.reset-button { - clear: both; - float: right; - } -} diff --git a/xmodule/assets/problem/_edit.scss b/xmodule/assets/problem/_edit.scss deleted file mode 100644 index f3fc795ec646..000000000000 --- a/xmodule/assets/problem/_edit.scss +++ /dev/null @@ -1,109 +0,0 @@ -.editor-bar { - .editor-tabs { - .advanced-toggle { - height: auto; - margin-top: -4px; - padding: 3px 9px; - font-size: 12px; - color: var(--link-color); - - &.current { - border: 1px solid var(--lightGrey) !important; - border-radius: 3px !important; - background: var(--lightGrey) !important; - color: var(--darkGrey) !important; - pointer-events: none; - cursor: none; - - &:hover, - &:focus { - box-shadow: 0 0 0 0 !important; - background-color: var(--white); - } - } - } - - } -} - -.simple-editor-cheatsheet { - position: absolute; - top: 41px; - @include left(70%); - width: 0; - border-left: 1px solid var(--gray-l2); - - background-color: var(--lightGrey); - overflow: hidden; - - &.shown { - width: 30%; - height: 92%; - overflow-y: scroll; - } - - .cheatsheet-wrapper { - padding: 5%; - } - - h6 { - margin-top: 4px; - margin-bottom: 7px; - margin-left: 4px; - font-size: 15px; - font-weight: 700; - display: inline-block; - vertical-align: top; - } - - .row { - @include clearfix(); - - padding-bottom: 5px !important; - margin-bottom: 10px !important; - border-bottom: 1px solid #ddd !important; - - &:last-child { - border-bottom: none !important; - margin-bottom: 0 !important; - } - } - - .col { - display: block; - - &.sample { - margin-right: 30px; - - .icon { - height: calc((var(--baseline) * 1.5)); - } - } - } - - pre { - font-size: 12px; - line-height: 18px; - } - - code { - padding: 0; - background: none; - } -} - -.problem-editor { - // adding padding to simple editor only - adjacent selector is needed since there are no toggles for CodeMirror - .markdown-box + .CodeMirror { - padding: 10px; - width: 69%; - } -} - -.problem-editor-icon { - display: inline-block; - width: 26px; - height: 21px; - vertical-align: middle; - color: var(--body-color); -} diff --git a/xmodule/assets/sequence/_display.scss b/xmodule/assets/sequence/_display.scss deleted file mode 100644 index 595b602a8872..000000000000 --- a/xmodule/assets/sequence/_display.scss +++ /dev/null @@ -1,340 +0,0 @@ -@import 'vendor/bi-app/bi-app-ltr'; -@import 'bourbon/bourbon'; -@import 'lms/theme/variables'; -@import 'bootstrap/scss/variables'; -@import 'bootstrap/scss/mixins/breakpoints'; -@import 'lms/theme/variables-v1'; - -$seq-nav-border-color: var(--border-color) !default; -$seq-nav-hover-color: rgb(245, 245, 245) !default; -$seq-nav-link-color: var(--link-color) !default; -$seq-nav-icon-color: rgb(10, 10, 10) !default; -$seq-nav-icon-color-muted: rgb(90, 90, 90) !default; -$seq-nav-tooltip-color: rgb(51, 51, 51) !default; -$seq-nav-height: 50px; - -// repeated extends - needed since LMS styling was referenced -.block-link { - @include border-left(1px solid $seq-nav-border-color); - - display: block; - - &:hover, - &:focus { - background: none; - } -} - -.topbar { - @include clearfix(); - - border-bottom: 1px solid $seq-nav-border-color; - - @media print { - display: none; - } - - a { - &.block-link { - @include border-left(1px solid $seq-nav-border-color); - - display: block; - - &:hover, - &:focus { - background: none; - } - } - } -} - -%ui-clear-button { - background-color: transparent; - background-image: none; - background-position: center 14px; - background-repeat: no-repeat; - border: none; - border-radius: 0; - background-clip: border-box; - box-shadow: none; - box-sizing: content-box; - font-family: inherit; - font-size: inherit; - font-weight: inherit; -} - - -// ==================== - -.sequence-nav { - @extend .topbar; - - margin: 0 auto var(--baseline); - position: relative; - border-bottom: none; - z-index: 0; - height: $seq-nav-height; - display: flex; - justify-content: center; - - @media print { - display: none; - } - - .sequence-list-wrapper { - @extend %ui-depth2; - - position: relative; - height: 100%; - flex-grow: 1; - - @include media-breakpoint-down(xs) { - white-space: nowrap; - overflow-x: scroll; - } - } - - ol { - display: flex; - - li { - box-sizing: border-box; - min-width: 40px; - flex-grow: 1; - border-color: $seq-nav-border-color; - border-width: 1px; - border-top-style: solid; - - &:not(:last-child) { - @include border-right-style(solid); - } - - button { - @extend %ui-fake-link; - @extend %ui-clear-button; - - width: 100%; - height: ($seq-nav-height - 1); - position: relative; - margin: 0; - padding: 0; - display: block; - text-align: center; - border-color: $seq-nav-border-color; - border-width: 1px; - border-bottom-style: solid; - box-sizing: border-box; - overflow: visible; // for tooltip - IE11 uses 'hidden' by default if width/height is specified - - .icon { - display: inline-block; - line-height: 100%; // This matches the height of the its within (the parent) to get vertical centering. - font-size: 110%; - color: $seq-nav-icon-color-muted; - } - - .fa-bookmark { - color: $seq-nav-link-color; - } - - //video - &.seq_video { - .icon::before { - content: "\f008"; // .fa-film - } - } - - //other - &.seq_other { - .icon::before { - content: "\f02d"; // .fa-book - } - } - - //vertical - &.seq_vertical { - .icon::before { - content: "\f00b"; // .fa-tasks - } - } - - //problems - &.seq_problem { - .icon::before { - content: "\f044"; // .fa-pencil-square-o - } - } - - .sequence-tooltip { - @include text-align(left); - - @extend %ui-depth2; - - margin-top: 12px; - background: $seq-nav-tooltip-color; - color: var(--white); - font-family: var(--font-family-sans-serif); - line-height: lh(); - right: 0; // Should not be RTLed, tooltips do not move in RTL - padding: 6px; - position: absolute; - top: 48px; - text-shadow: 0 -1px 0 var(--black); - white-space: pre; - pointer-events: none; - - &:empty { - background: none; - - &::after { - display: none; - } - } - - &::after { - @include transform(rotate(45deg)); - @include right(18px); - - background: $seq-nav-tooltip-color; - content: " "; - display: block; - height: 10px; - right: 18px; // Not RTLed, positions tooltips relative to seq nav item - position: absolute; - top: -5px; - width: 10px; - } - } - } - } - } - - body.touch-based-device & ol li button:hover p { - display: none; - } -} - -.sequence-nav-button { - @extend %ui-depth3; - - display: block; - top: 0; - min-width: 40px; - max-width: 40px; - height: 100%; - text-shadow: none; // overrides default button text-shadow - background: none; // overrides default button gradient - background-color: theme-color("inverse"); - border-color: $seq-nav-border-color; - box-shadow: none; - font-size: inherit; - font-weight: normal; - padding: 0; - white-space: nowrap; - overflow-x: hidden; - - @include media-breakpoint-up(md) { - min-width: 120px; - max-width: 200px; - text-overflow: ellipsis; - - span:not(:last-child) { - @include padding-right(calc((var(--baseline) / 2))); - } - } - - .sequence-nav-button-label { - display: none; - - @include media-breakpoint-up(md) { - display: inline; - } - } - - &.button-previous { - order: -999; - - @include media-breakpoint-up(md) { - @include left(0); - @include border-top-left-radius(3px); - @include border-top-right-radius(0); - @include border-bottom-right-radius(0); - @include border-bottom-left-radius(3px); - } - } - - &.button-next { - order: 999; - - @include media-breakpoint-up(md) { - @include right(0); - @include border-top-left-radius(0); - @include border-top-right-radius(3px); - @include border-bottom-right-radius(3px); - @include border-bottom-left-radius(0); - } - } - - &.disabled { - cursor: normal; - } -} - -.seq_contents { - display: none; -} - -.sequence-bottom { - position: relative; - height: 45px; - margin: lh(2) auto; - display: flex; - justify-content: center; - - .sequence-nav-button { - position: relative; - min-width: 120px; - max-width: 200px; - text-overflow: ellipsis; - - &:last-of-type { - @include border-left(none); - } - } - - @media print { - display: none; - } -} - -#seq_content { - &:focus, - &:active { - outline: none; - } -} - -// hover and active states -.sequence-nav-button, -.sequence-nav button { - &.focused, - &:hover, - &:active, - &.active { - padding-top: 2px; - background-color: theme-color("primary"); - - .icon { - color: theme-color("inverse"); - } - - @include media-breakpoint-up(sm) { - border-bottom: 3px solid $seq-nav-link-color; - background-color: theme-color("inverse"); - - .icon { - color: $seq-nav-icon-color; - } - } - } -} diff --git a/xmodule/assets/tabs/_codemirror.scss b/xmodule/assets/tabs/_codemirror.scss deleted file mode 100644 index 37a894a10395..000000000000 --- a/xmodule/assets/tabs/_codemirror.scss +++ /dev/null @@ -1,20 +0,0 @@ -.editor { - @include clearfix(); - - .CodeMirror { - box-sizing: border-box; - - width: 100%; - position: relative; - height: 379px; - border: 1px solid #3c3c3c; - border-top: 1px solid #8891a1; - background: var(--white); - color: #3c3c3c; - } - - .CodeMirror-scroll { - height: 100%; - } -} - diff --git a/xmodule/assets/tabs/_tabs.scss b/xmodule/assets/tabs/_tabs.scss deleted file mode 100644 index 4b8c2a387a91..000000000000 --- a/xmodule/assets/tabs/_tabs.scss +++ /dev/null @@ -1,141 +0,0 @@ -// styles duped from _unit.scss - Edit Header (Component Name, Mode-Editor, Mode-Settings) -@import 'vendor/bi-app/bi-app-ltr'; -@import 'bourbon/bourbon'; -@import 'lms/theme/variables'; -@import 'bootstrap/scss/variables'; -@import 'cms/theme/variables-v1'; -@import 'mixins'; - - -.tabs-wrapper { - padding-top: 0; - position: relative; - - .wrapper-comp-settings { - // set visibility to metadata editor - display: block; - } -} - -.editor-single-tab-name { - display: none; -} - - -.editor-with-tabs { - @include clearfix(); - - position: relative; - - - .edit-header { - box-sizing: border-box; - - padding: 18px var(--baseline); - top: 0 !important; // ugly override for second level tab override - right: 0; - background-color: var(--blue); - border-bottom: 1px solid var(--blue-d2); - color: var(--white); - - //Component Name - .component-name { - position: relative; - top: 0; - left: 0; - width: 50%; - color: var(--white); - font-weight: 600; - - - - em { - display: inline-block; - margin-right: calc((var(--baseline)/4)); - font-weight: 400; - color: var(--white); - } - } - - //Nav-Edit Modes - .editor-tabs { - list-style: none; - right: 0; - top: calc((var(--baseline)/4)); - position: absolute; - padding: 12px calc((var(--baseline)*0.75)); - - .inner_tab_wrap { - display: inline-block; - margin-left: 8px; - - a.tab { - @include font-size(14); - @include linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0)); - - border: 1px solid var(--blue-d1); - border-radius: 3px; - padding: calc((var(--baseline)/4)) (var(--baseline)); - background-color: var(--blue); - font-weight: bold; - color: var(--white); - - &.current { - @include linear-gradient(var(--blue), var(--blue)); - - color: var(--blue-d1); - box-shadow: inset 0 1px 2px 1px var(--shadow-l1); - background-color: var(--blue-d4); - cursor: default; - } - - &:hover, - &:focus { - box-shadow: inset 0 1px 2px 1px var(--shadow); - background-image: linear-gradient(#009fe6, #009fe6) !important; - } - } - } - } - } - - .is-inactive { - display: none; - } - - .comp-subtitles-entry { - text-align: center; - - .file-upload { - display: none; - } - - .comp-subtitles-import-list { - > li { - display: block; - margin: calc(var(--baseline)/2) 0; - } - - .blue-button { - font-size: 1em; - display: block; - width: 70%; - margin: 0 auto; - text-align: center; - } - } - } -} - -.component-tab { - background: var(--white); - position: relative; - border-top: 1px solid #8891a1; - - &#advanced { - padding: 0; - border: none; - } -} - - diff --git a/xmodule/assets/video/_accessible_menu.scss b/xmodule/assets/video/_accessible_menu.scss deleted file mode 100644 index d411925f2390..000000000000 --- a/xmodule/assets/video/_accessible_menu.scss +++ /dev/null @@ -1,237 +0,0 @@ -@import 'base/mixins'; -@import 'lms/theme/variables-v1'; - -$a11y--gray: rgb(127, 127, 127); -$a11y--blue: rgb(0, 159, 230); -$a11y--gray-d1: var(--gray-d1); -$a11y--gray-l2: var(--gray-l2); -$a11y--gray-l3: var(--gray-l3); -$a11y--blue-s1: var(--blue-s1); - -%use-font-awesome { - font-family: FontAwesome; - -webkit-font-smoothing: antialiased; - display: inline-block; - speak: none; -} - -.a11y-menu-container { - position: relative; - - &.open { - .a11y-menu-list { - display: block; - } - } - - .a11y-menu-list { - @extend %ui-depth3; - - top: 100%; - margin: 0; - padding: 0; - display: none; - position: absolute; - list-style: none; - background-color: var(--white); - border: 1px solid #eee; - - li { - @extend %ui-fake-link; - - margin: 0; - padding: 0; - border-bottom: 1px solid #eee; - color: var(--white); - - a { - display: block; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - color: $a11y--gray-l2; - font-size: 14px; - line-height: 23px; - - &:hover, - &:focus { - color: $a11y--gray-d1; - } - } - - &.active { - a { - color: $a11y--blue; - } - } - - &:last-child { - box-shadow: none; - border-bottom: 0; - margin-top: 0; - } - } - } -} - - -// Video track button specific styles - -.video-tracks { - .a11y-menu-container { - display: inline-block; - vertical-align: top; - border-left: 1px solid #eee; - - &.open { - > a { - background-color: var(--action-primary-active-bg); - color: var(--very-light-text); - - &::after { - color: var(--very-light-text); - } - } - } - - > a { - @include transition(all var(--tmg-f2) ease-in-out 0s); - @include font-size(12); - - display: block; - border-radius: 0 3px 3px 0; - background-color: var(--very-light-text); - padding: calc((var(--baseline)*0.75)) calc((var(--baseline)*1.25)) calc((var(--baseline)*0.75)) calc((var(--baseline)*0.75)); - color: $a11y--gray-l2; - min-width: 1.5em; - line-height: 14px; - text-align: center; - overflow: hidden; - text-overflow: ellipsis; - - &::after { - @extend %use-font-awesome; - - content: "\f0d7"; - position: absolute; - right: calc((var(--baseline)*0.5)); - top: 33%; - color: var(--lighter-base-font-color); - } - } - - .a11y-menu-list { - right: 0; - - li { - font-size: em(14); - - a { - border: 0; - display: block; - padding: lh(0.5); - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } - } - } - } -} - - -.contextmenu, -.submenu { - @extend %ui-depth5; - - border: 1px solid #333; - background: var(--white); - color: #333; - padding: 0; - margin: 0; - list-style: none; - position: absolute; - top: 0; - display: none; - outline: none; - cursor: default; - white-space: nowrap; - - &.is-opened { - display: block; - } - - .menu-item, - .submenu-item { - border-top: 1px solid var(--gray-l3); - padding: calc((var(--baseline)/4)) calc((var(--baseline)/2)); - outline: none; - - & > span { - color: #333; - } - - &:first-child { - border-top: none; - } - - &:focus { - background: #333; - color: var(--white); - - & > span { - color: var(--white); - } - } - } - - .submenu-item { - position: relative; - padding: calc((var(--baseline)/4)) var(--baseline) calc((var(--baseline)/4)) calc((var(--baseline)/2)); - - &::after { - content: '\25B6'; - position: absolute; - right: 5px; - line-height: 25px; - font-size: 10px; - } - - .submenu { - display: none; - } - - &.is-opened { - background: #333; - color: var(--white); - - & > span { - color: var(--white); - } - - & > .submenu { - display: block; - } - } - - .is-selected { - font-weight: bold; - } - } - - .is-disabled { - pointer-events: none; - color: var(--gray-l3); - } -} - -.overlay { - @extend %ui-depth4; - - position: fixed; - top: 0; - left: 0; - right: 0; - bottom: 0; - background-color: transparent; -} diff --git a/xmodule/assets/video/_display.scss b/xmodule/assets/video/_display.scss deleted file mode 100644 index c1f2ccee19fa..000000000000 --- a/xmodule/assets/video/_display.scss +++ /dev/null @@ -1,1043 +0,0 @@ -// This is for A Font Garde -// It loads the icon font only when it's available. -// --- -// It is scoped to the video player for now, but we -// will eventually want to move this to the main font -// sheet, globally, so it applies to all use cases. - -// -------- -// Defaults: what displays if the icon font doesn't load. -// -------- -@import 'vendor/bi-app/bi-app-ltr'; -@import 'bourbon/bourbon'; -@import 'lms/theme/variables'; -@import 'bootstrap/scss/variables'; -@import 'bootstrap/scss/mixins/breakpoints'; -@import 'lms/theme/variables-v1'; - -// the html target is necessary for xblocks and xmodules, but works across the board - -$secondary-dark: rgb(142, 62, 99); // UXPL secondary dark -$secondary-base: rgb(203, 89, 141); // UXPL secondary base -$secondary-light: rgb(219, 139, 175); // UXPL secondary light -$cool-dark: rgb(79, 89, 93); // UXPL cool dark - -& { - margin-bottom: calc((var(--baseline)*1.5)); -} - -.is-hidden { - display: none; -} - -.video { - @include clearfix(); - - background: rgb(245, 245, 245); // UXPL grayscale x-back - display: block; - margin: 0 -12px; - padding: 12px; - border-radius: 5px; - outline: none; - - &:focus, - &:active, - &:hover { - border: 0; - } - - &.is-initialized { - .video-wrapper { - .spinner { - display: none; - } - } - } - - // CASE: video pre-roll state - &.is-pre-roll { - .slider { - visibility: hidden; - } - - .video-player { - position: relative; - - &::before { - display: block; - content: ""; - width: 100%; - padding-top: 55%; - } - } - } - - .tc-wrapper { - @include clearfix(); - - position: relative; - } - - .focus_grabber { - position: relative; - display: inline; - width: 0; - height: 0; - } - - .downloads-heading { - margin: 1em 0 0; - } - - .wrapper-video-bottom-section { - display: flex; - justify-content: space-between; - - .wrapper-download-video, - .wrapper-download-transcripts, - .wrapper-handouts, - .branding, - .wrapper-transcript-feedback { - flex: 1; - margin-top: var(--baseline); - - @include padding-right(var(--baseline)); - - vertical-align: top; - } - } - - .wrapper-downloads { - @include media-breakpoint-up(md) { - display: flex; - } - - .hd { - margin: 0; - } - - .wrapper-download-video { - .video-sources { - margin: 0; - } - } - - .wrapper-download-transcripts { - .list-download-transcripts { - margin: 0; - padding: 0; - list-style: none; - - .transcript-option { - margin: 0; - - a.btn , a.btn-link{ - font-size: 16px !important; - font-weight: unset; - } - } - } - } - - .branding { - @include padding-right(0); - - .host-tag { - position: absolute; - left: -9999em; - display: inline-block; - vertical-align: middle; - color: var(--body-color); - } - - .brand-logo { - display: inline-block; - max-width: 100%; - max-height: calc((var(--baseline)*2)); - padding: calc((var(--baseline)/4)) 0; - vertical-align: middle; - } - } - - } - - .wrapper-transcript-feedback { - display: none; - - .transcript-feedback-buttons { - display: flex; - } - .transcript-feedback-btn-wrapper { - margin-right: 10px; - } - .thumbs-up-btn, - .thumbs-down-btn { - border: none; - box-shadow: none; - background: transparent; - } - } - - .google-disclaimer { - display: none; - margin-top: var(--baseline); - @include padding-right(var(--baseline)); - vertical-align: top; - } - - .video-wrapper { - @include float(left); - @include margin-right(flex-gutter(9)); - - width: flex-grid(6, 9); - background-color: black; - position: relative; - - &:hover { - .btn-play { - color: theme-color("primary"); - } - - .btn-play::after { - background: theme-color("inverse"); - } - } - - .video-player-pre, - .video-player-post { - height: 50px; - background-color: rgb(17, 16, 16) // UXPL grayscale black; - } - - .spinner { - @include transform(translate(-50%, -50%)); - - position: absolute; - z-index: 1; - background: rgba(0, 0, 0, 0.7); - top: 50%; - left: 50%; - padding: 30px; - border-radius: 25%; - - &::after { - @include animation(rotateCW 3s infinite linear); - - content: ''; - display: block; - width: 30px; - height: 30px; - border: 7px solid white; - border-top-color: transparent; - border-radius: 100%; - position: relative; - } - } - - .btn-play { - @include transform(translate(-50%, -50%)); - - position: absolute; - z-index: 1; - top: 46%; - left: 50%; - font-size: 4em; - cursor: pointer; - opacity: 0.1; - - &::after { - background: var(--white); - position: absolute; - width: 50%; - height: 50%; - content: ''; - left: 0; - top: 0; - bottom: 0; - right: 0; - margin: auto; - z-index: -1; - } - } - - .closed-captions { - @include left(5%); - - position: absolute; - width: 90%; - box-sizing: border-box; - top: 70%; - text-align: center; - } - - .closed-captions.is-visible { - max-height: calc((var(--baseline) * 3)); - border-radius: calc((var(--baseline) / 5)); - padding: 8px calc((var(--baseline) / 2)) 8px calc((var(--baseline) * 1.5)); - background: rgba(0, 0, 0, 0.75); - color: var(--yellow); - - &::before { - position: absolute; - display: inline-block; - top: 50%; - - @include left(var(--baseline)); - - margin-top: -0.6em; - font-family: 'FontAwesome'; - content: "\f142"; - color: var(--white); - opacity: 0.5; - } - - &:hover, - &.is-dragging { - background: rgba(0, 0, 0, 1); - cursor: move; - - &::before { - opacity: 1; - } - } - } - - .video-player { - overflow: hidden; - min-height: 158px; - - > div { - height: 100%; - - &.hidden { - display: none; - } - } - - .video-error, - .video-hls-error { - padding: calc((var(--baseline) / 5)); - background: black; - color: white !important; // the pattern library headings shim is more scoped - } - - object, - iframe, - video { - @include left(0); - - display: block; - border: none; - width: 100%; - } - - h4 { - text-align: center; - color: white; - - &.hidden { - display: none; - } - } - } - - .video-controls { - @include clearfix(); - - position: relative; - border: 0; - background: rgb(40, 44, 46); // UXPL grayscale-cool x-dark - color: rgb(240, 243, 245); // UXPL grayscale-cool xx-light - - &:hover, - &:focus { - ul, - div { - opacity: 1; - } - } - - %video-control { - @extend %t-strong; - @extend %t-title7; - - display: inline-block; - vertical-align: middle; - margin: 0; - border: 0; - border-radius: 0; - padding: calc((var(--baseline) / 2)) calc((var(--baseline) / 1.5)); - background: rgb(40, 44, 46); // UXPL grayscale-cool x-dark - box-shadow: none; - text-shadow: none; - color: rgb(207, 216, 220); // UXPL grayscale-cool light - - &:hover, - &:focus { - background: darken(rgb(40, 44, 46), 7%); // UXPL secondary - } - - &:active, - &.is-active, - &.active { - color: rgb(14, 166, 236); // UXPL primary accent - } - } - - .control { - @extend %video-control; - - .icon { - width: 1em; - - &.icon-hd { - // except when it's text, like with HD - // otherwise it's shifted to the right because "HD" is wider than 1em - width: auto; - } - } - } - - .slider { - @include clearfix(); - @include transform-origin(bottom left); - @include transition(height 0.7s ease-in-out 0s); - - box-sizing: border-box; - position: absolute; - bottom: 100%; - left: 0; - right: 0; - z-index: 1; - height: calc((var(--baseline) / 4)); - margin-left: 0; - border: 1px solid $cool-dark; - border-radius: 0; - background: $cool-dark; - - .ui-widget-header { - background: $secondary-dark; - border: 1px solid $secondary-dark; - box-shadow: none; - top: -1px; - left: -1px; - } - - .ui-corner-all.slider-range { - opacity: 0.3; - background-color: #1e91d3; - } - - .ui-slider-handle { - @extend %ui-fake-link; - - @include transform-origin(bottom left); - @include transition(all 0.7s ease-in-out 0s); - - box-sizing: border-box; - top: -1px; - height: calc((var(--baseline) / 4)); - width: calc((var(--baseline) / 4)); - margin-left: calc(-1 * (var(--baseline) / 8)); // center-center causes the control to be beyond the end of the sider - border: 1px solid $secondary-base; - border-radius: calc((var(--baseline) / 5)); - padding: 0; - background: $secondary-base; - box-shadow: none; - - &:focus, - &:hover { - background-color: $secondary-light; - border-color: $secondary-light; - } - } - } - - .vcr { - @include float(left); - - list-style: none; - - @include border-right(1px solid rgb(40, 44, 46)); // UXPL grayscale-cool x-dark - - padding: 0; - - @media (max-width: 1120px) { - @include margin-right(lh(0.5)); - - font-size: em(14); - } - - .video_control { - &:focus { - position: relative; - } - - &.skip { - white-space: nowrap; - } - } - - .vidtime { - @extend %t-strong; - @extend %t-title7; - - @include padding-left(lh(0.75)); - - display: inline-block; - color: rgb(207, 216, 220); // UXPL grayscale-cool light - -webkit-font-smoothing: antialiased; - - @media (max-width: 1120px) { - @include padding-left(lh(0.5)); - } - } - } - - .secondary-controls { - @include float(right); - @include border-left(1px dotted rgb(79, 89, 93)); // UXPL grayscale-cool x-dark - - .volume, - .add-fullscreen, - .grouped-controls, - .auto-advance, - .quality-control { - @include border-left(1px dotted rgb(79, 89, 93)); // UXPL grayscale-cool x-dark - } - - .speed-button, - .volume > .control, - .add-fullscreen, - .auto-advance, - .quality-control, - .toggle-transcript { - &:focus { - position: relative; - } - } - - .menu-container { - position: relative; - - .menu { - @include transition(none); - - @extend %ui-depth1; - - position: absolute; - display: none; - bottom: calc((var(--baseline) * 2)); - - @include right(0); // right-align menus since this whole collection is on the right - - width: 120px; - margin: 0; - border: none; - padding: 0; - box-shadow: none; - background-color: rgb(40, 44, 46); // UXPL grayscale-cool x-dark - list-style: none; - - li { - @extend %ui-fake-link; - - color: rgb(231, 236, 238); // UXPL grayscale-cool x-light - - .speed-option, - .control-lang { - @include text-align(left); - - display: block; - width: 100%; - border: 0; - border-radius: 0; - padding: lh(0.5); - background: rgb(40, 44, 46); // UXPL grayscale-cool x-dark - box-shadow: none; - color: rgb(231, 236, 238); // UXPL grayscale-cool x-light - overflow: hidden; - text-shadow: none; - text-overflow: ellipsis; - white-space: nowrap; - - &:hover, - &:focus { - background-color: rgb(79, 89, 93); // UXPL grayscale-cool dark - color: rgb(252, 252, 252); // UXPL grayscale white - } - } - - &.is-active { - .speed-option, - .control-lang { - @include border-left(var(--baseline)/10 solid rgb(14, 166, 236)); - - font-weight: var(--font-bold); - color: rgb(14, 166, 236); // UXPL primary accent - } - } - } - } - - &.is-opened { - .menu { - display: block; - } - } - } - - .speeds, - .lang, - .grouped-controls { - display: inline-block; - } - - .speeds { - &.is-opened { - .control { - .icon { - @include ltr { - @include transform(rotate(-90deg)); - } - - @include rtl { - @include transform(rotate(90deg)); - } - } - } - } - - .speed-button { - .label { - @include padding(0 calc((var(--baseline)/3)) 0 0); - - font-family: var(--font-family-sans-serif); - color: rgb(231, 236, 238); // UXPL grayscale-cool x-light - - @media (max-width: 1120px) { - position: absolute; - clip: rect(1px, 1px, 1px, 1px); - } - } - - .value { - @include padding(0, lh(0.5), 0, 0); - - color: rgb(231, 236, 238); // UXPL grayscale-cool x-light - font-weight: bold; - - @media (max-width: 1120px) { - padding: 0 lh(0.5); - } - } - } - } - - .lang { - .language-menu { - width: var(--baseline); - padding: calc((var(--baseline) / 2)) 0; - } - - .control { - .icon { - @include rtl { - @include transform(rotate(-180deg)); - } - } - } - - &.is-opened { - .control { - .icon { - @include ltr { - @include transform(rotate(90deg)); - } - - @include rtl { - @include transform(rotate(90deg)); - } - } - } - } - } - - .volume { - display: inline-block; - position: relative; - - &.is-opened { - .volume-slider-container { - display: block; - opacity: 1; - } - } - - &:not(:first-child) > a { - @include border-left(none); - } - - .volume-slider-container { - @include transition(none); - - @extend %ui-depth1; - - display: none; - position: absolute; - bottom: calc((var(--baseline) * 2)); - - @include right(0); - - width: 41px; - height: 120px; - background-color: rgb(40, 44, 46); // UXPL grayscale-cool x-dark - - .volume-slider { - height: 100px; - width: calc((var(--baseline) / 4)); - margin: 14px auto; - box-sizing: border-box; - border: 1px solid $cool-dark; - background: $cool-dark; - - .ui-slider-handle { - @extend %ui-fake-link; - - @include transition(height var(--tmg-s2) ease-in-out 0s, width var(--tmg-s2) ease-in-out 0s); - @include left(-5px); - - box-sizing: border-box; - height: 13px; - width: 13px; - border: 1px solid $secondary-base; - border-radius: calc((var(--baseline) / 5)); - padding: 0; - background: $secondary-base; - box-shadow: none; - - &:hover, - &:focus { - background: $secondary-light; - border-color: $secondary-light; - } - } - - .ui-slider-range { - background: $secondary-dark; - border: 1px solid $secondary-dark; - left: -1px; - bottom: -1px; - } - } - } - } - - .quality-control { - font-weight: 700; - letter-spacing: -1px; - - &.active { - color: rgb(14, 166, 236); // UXPL primary accent - } - - &.is-hidden { - display: none !important; - } - } - - .toggle-transcript { - &.is-active { - color: rgb(14, 166, 236); // UXPL primary accent - } - } - - .lang { - & > .hide-subtitles { - @include transition(none); - } - } - } - } - - &:hover { - .video-controls { - .slider { - height: calc((var(--baseline) / 1.5)); - - .ui-slider-handle { - height: calc((var(--baseline) / 1.5)); - width: calc((var(--baseline) / 1.5)); - } - } - } - } - } - - &.video-fullscreen { - .closed-captions { - width: 65%; - } - - &.closed .closed-captions { - width: 90%; - } - } - - .subtitles { - @include float(left); - - overflow: auto; - max-height: 460px; - width: flex-grid(3, 9); - padding: 0; - font-size: 14px; - visibility: visible; - - a { - color: #0074b5; - } - - .subtitles-menu { - height: 100%; - margin: 0; - padding: 0 3px; - list-style: none; - - li { - @extend %ui-fake-link; - - margin-bottom: 8px; - border: 0; - padding: 0; - color: #0074b5; // AA compliant - line-height: lh(); - - span { - display: block; - } - - &.current { - color: #333; - font-weight: 700; - } - - &.focused { - outline: #000 dotted thin; - outline-offset: -1px; - } - - &:hover, - &:focus { - text-decoration: underline; - } - - &:empty { - margin-bottom: 0; - } - - &.spacing:last-of-type { - position: relative; - - .transcript-end { - position: absolute; - bottom: 0; - } - } - } - } - } - - &.closed { - .video-wrapper { - width: flex-grid(9, 9); - background-color: inherit; - } - - .video-wrapper .video-controls.html5 { - bottom: 0; - left: 0; - right: 0; - position: absolute; - z-index: 1; - } - - .video-wrapper .video-player-pre, - .video-wrapper .video-player-post { - height: 0; - } - - .video-wrapper .video-player { - h3 { - color: black; - } - } - - .subtitles { - @extend .is-hidden; - } - - .subtitles.html5 { - @extend %ui-depth0; - - background-color: rgba(243, 243, 243, 0.8); - height: 100%; - position: absolute; - right: 0; - bottom: 0; - top: 0; - width: 275px; - padding: 0 var(--baseline); - display: none; - } - } - - &.video-fullscreen { - @extend %ui-depth4; - - background: rgba(#000, 0.95); - border: 0; - bottom: 0; - height: 100%; - left: 0; - margin: 0; - padding: 0; - position: fixed; - top: 0; - width: 100%; - vertical-align: middle; - border-radius: 0; - - &.closed { - .tc-wrapper { - .video-wrapper { - width: 100%; - } - } - } - - .video-wrapper .video-player-pre, - .video-wrapper .video-player-post { - height: 0; - } - - .video-wrapper { - position: static; - } - - .video-wrapper .video-player { - h3 { - color: white; - } - } - - .tc-wrapper { - @include clearfix(); - - width: 100%; - height: 100%; - position: static; - - .video-wrapper { - height: 100%; - width: 75%; - - @include margin-right(0); - - vertical-align: middle; - - object, - iframe, - video { - position: absolute; - width: auto; - height: auto; - } - } - - .video-controls { - @extend %ui-depth4; - - position: absolute; - bottom: 0; - left: 0; - width: 100%; - } - } - - .subtitles { - height: 100%; - width: 25%; - padding: lh(); - - box-sizing: border-box; - @include transition(none); - - background: var(--black); - visibility: visible; - - li { - color: #aaa; - - &.current { - color: var(--white); - } - } - } - } - - &.is-touch { - .tc-wrapper { - .video-wrapper { - object, - iframe, - video { - width: 100%; - height: 100%; - } - } - } - } - - .video-pre-roll { - @extend %ui-depth3; - - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background-position: 50% 50%; - background-repeat: no-repeat; - background-size: 100%; - background-color: var(--black); - - &.is-html5 { - background-size: 15%; - } - - .btn-play.btn-pre-roll { - padding: var(--baseline); - border: none; - border-radius: var(--baseline); - background: var(--black-t2); - box-shadow: none; - - &::after { - // the button class, ties to functionality, also uses an icon font - // we're overriding it here so we can use our image instead - display: none; - } - - img { - height: calc((var(--baseline) * 4)); - width: calc((var(--baseline) * 4)); - } - - &:hover, - &:focus { - background: var(--blue); - } - } - } -} diff --git a/xmodule/assets/word_cloud/_display.scss b/xmodule/assets/word_cloud/_display.scss deleted file mode 100644 index 4f7320380a12..000000000000 --- a/xmodule/assets/word_cloud/_display.scss +++ /dev/null @@ -1,30 +0,0 @@ -@import 'bourbon/bourbon'; -@import 'lms/theme/variables'; -@import 'bootstrap/scss/variables'; -@import 'lms/theme/variables-v1'; - -.input-cloud { - margin: calc((var(--baseline)/4)); -} - -.result_cloud_section { - display: none; - width: 0px; - height: 0px; -} - -.result_cloud_section.active { - display: block; - width: 100%; - height: auto; - margin-top: 1em; - - h3 { - font-size: 100%; - } -} - -.your_words{ - font-size: 0.85em; - display: block; -} diff --git a/xmodule/capa_block.py b/xmodule/capa_block.py index 54ca0cbc312f..c926c65edf1e 100644 --- a/xmodule/capa_block.py +++ b/xmodule/capa_block.py @@ -37,7 +37,7 @@ from xmodule.graders import ShowCorrectness from xmodule.raw_block import RawMixin from xmodule.util.sandboxing import SandboxService -from xmodule.util.builtin_assets import add_webpack_js_to_fragment, add_sass_to_fragment +from xmodule.util.builtin_assets import add_webpack_js_to_fragment, add_css_to_fragment from xmodule.x_module import ( ResourceTemplates, XModuleMixin, @@ -361,7 +361,7 @@ def student_view(self, _context, show_detailed_errors=False): else: html = self.get_html() fragment = Fragment(html) - add_sass_to_fragment(fragment, "ProblemBlockDisplay.scss") + add_css_to_fragment(fragment, "ProblemBlockDisplay.css") add_webpack_js_to_fragment(fragment, 'ProblemBlockDisplay') shim_xmodule_js(fragment, 'Problem') return fragment @@ -393,7 +393,7 @@ def studio_view(self, _context): fragment = Fragment( self.runtime.service(self, 'mako').render_cms_template(self.mako_template, self.get_context()) ) - add_sass_to_fragment(fragment, 'ProblemBlockEditor.scss') + add_css_to_fragment(fragment, 'ProblemBlockEditor.css') add_webpack_js_to_fragment(fragment, 'ProblemBlockEditor') shim_xmodule_js(fragment, 'MarkdownEditingDescriptor') return fragment diff --git a/xmodule/html_block.py b/xmodule/html_block.py index 2db198360107..62949647cee3 100644 --- a/xmodule/html_block.py +++ b/xmodule/html_block.py @@ -23,7 +23,7 @@ from xmodule.html_checker import check_html from xmodule.stringify import stringify_children from xmodule.util.misc import escape_html_characters -from xmodule.util.builtin_assets import add_webpack_js_to_fragment, add_sass_to_fragment +from xmodule.util.builtin_assets import add_webpack_js_to_fragment, add_css_to_fragment from xmodule.x_module import ( ResourceTemplates, shim_xmodule_js, @@ -90,7 +90,7 @@ def student_view(self, _context): Return a fragment that contains the html for the student view """ fragment = Fragment(self.get_html()) - add_sass_to_fragment(fragment, 'HtmlBlockDisplay.scss') + add_css_to_fragment(fragment, 'HtmlBlockDisplay.css') add_webpack_js_to_fragment(fragment, 'HtmlBlockDisplay') shim_xmodule_js(fragment, 'HTMLModule') return fragment @@ -136,7 +136,7 @@ def studio_view(self, _context): fragment = Fragment( self.runtime.service(self, 'mako').render_cms_template(self.mako_template, self.get_context()) ) - add_sass_to_fragment(fragment, 'HtmlBlockEditor.scss') + add_css_to_fragment(fragment, 'HtmlBlockEditor.css') add_webpack_js_to_fragment(fragment, 'HtmlBlockEditor') shim_xmodule_js(fragment, 'HTMLEditingDescriptor') return fragment diff --git a/xmodule/lti_block.py b/xmodule/lti_block.py index 55f940b381c2..e7c173075b4e 100644 --- a/xmodule/lti_block.py +++ b/xmodule/lti_block.py @@ -84,7 +84,7 @@ ) from xmodule.lti_2_util import LTI20BlockMixin, LTIError from xmodule.raw_block import EmptyDataRawMixin -from xmodule.util.builtin_assets import add_webpack_js_to_fragment, add_sass_to_fragment +from xmodule.util.builtin_assets import add_webpack_js_to_fragment, add_css_to_fragment from xmodule.xml_block import XmlMixin from xmodule.x_module import ( ResourceTemplates, @@ -524,7 +524,7 @@ def student_view(self, _context): """ fragment = Fragment() fragment.add_content(self.runtime.service(self, 'mako').render_lms_template('lti.html', self.get_context())) - add_sass_to_fragment(fragment, 'LTIBlockDisplay.scss') + add_css_to_fragment(fragment, 'LTIBlockDisplay.css') add_webpack_js_to_fragment(fragment, 'LTIBlockDisplay') shim_xmodule_js(fragment, 'LTI') return fragment diff --git a/xmodule/poll_block.py b/xmodule/poll_block.py index f09889f506e6..a1c9686f42ac 100644 --- a/xmodule/poll_block.py +++ b/xmodule/poll_block.py @@ -21,7 +21,7 @@ from openedx.core.djangolib.markup import Text, HTML from xmodule.mako_block import MakoTemplateBlockBase from xmodule.stringify import stringify_children -from xmodule.util.builtin_assets import add_webpack_js_to_fragment, add_sass_to_fragment +from xmodule.util.builtin_assets import add_webpack_js_to_fragment, add_css_to_fragment from xmodule.x_module import ( ResourceTemplates, shim_xmodule_js, @@ -136,7 +136,7 @@ def student_view(self, _context): 'configuration_json': self.dump_poll(), } fragment.add_content(self.runtime.service(self, 'mako').render_lms_template('poll.html', params)) - add_sass_to_fragment(fragment, 'PollBlockDisplay.scss') + add_css_to_fragment(fragment, 'PollBlockDisplay.css') add_webpack_js_to_fragment(fragment, 'PollBlockDisplay') shim_xmodule_js(fragment, 'Poll') return fragment diff --git a/xmodule/seq_block.py b/xmodule/seq_block.py index 6d1a8c59adeb..1b94f47d898c 100644 --- a/xmodule/seq_block.py +++ b/xmodule/seq_block.py @@ -23,7 +23,7 @@ from xblock.fields import Boolean, Integer, List, Scope, String from edx_toggles.toggles import WaffleFlag, SettingDictToggle -from xmodule.util.builtin_assets import add_webpack_js_to_fragment, add_sass_to_fragment +from xmodule.util.builtin_assets import add_webpack_js_to_fragment, add_css_to_fragment from xmodule.x_module import ( ResourceTemplates, shim_xmodule_js, @@ -459,7 +459,7 @@ def student_view(self, context): banner_text, special_html = special_html_view if special_html and not masquerading_as_specific_student: fragment = Fragment(special_html) - add_sass_to_fragment(fragment, 'SequenceBlockDisplay.scss') + add_css_to_fragment(fragment, 'SequenceBlockDisplay.css') add_webpack_js_to_fragment(fragment, 'SequenceBlockDisplay') shim_xmodule_js(fragment, 'Sequence') return fragment @@ -601,7 +601,7 @@ def _student_or_public_view(self, context, prereq_met, prereq_meta_info, banner_ self._capture_full_seq_item_metrics(children) self._capture_current_unit_metrics(children) - add_sass_to_fragment(fragment, 'SequenceBlockDisplay.scss') + add_css_to_fragment(fragment, 'SequenceBlockDisplay.css') add_webpack_js_to_fragment(fragment, 'SequenceBlockDisplay') shim_xmodule_js(fragment, 'Sequence') return fragment diff --git a/xmodule/template_block.py b/xmodule/template_block.py index e6e69742cfbf..cdf83a556665 100644 --- a/xmodule/template_block.py +++ b/xmodule/template_block.py @@ -9,7 +9,7 @@ from web_fragments.fragment import Fragment from xmodule.editing_block import EditingMixin from xmodule.raw_block import RawMixin -from xmodule.util.builtin_assets import add_webpack_js_to_fragment, add_sass_to_fragment +from xmodule.util.builtin_assets import add_webpack_js_to_fragment, add_css_to_fragment from xmodule.x_module import ( ResourceTemplates, shim_xmodule_js, @@ -69,7 +69,7 @@ def studio_view(self, _context): fragment = Fragment( self.runtime.service(self, 'mako').render_cms_template(self.mako_template, self.get_context()) ) - add_sass_to_fragment(fragment, 'CustomTagBlockEditor.scss') + add_css_to_fragment(fragment, 'CustomTagBlockEditor.css') add_webpack_js_to_fragment(fragment, 'CustomTagBlockEditor') shim_xmodule_js(fragment, 'XMLEditingDescriptor') return fragment diff --git a/xmodule/tests/test_util_builtin_assets.py b/xmodule/tests/test_util_builtin_assets.py index bc26bed3d6be..0b3fba3f2bb1 100644 --- a/xmodule/tests/test_util_builtin_assets.py +++ b/xmodule/tests/test_util_builtin_assets.py @@ -1,23 +1,22 @@ """ Tests for methods defined in builtin_assets.py """ -from unittest import TestCase -from unittest.mock import patch -from django.core.exceptions import ImproperlyConfigured +from django.conf import settings +from unittest import TestCase from web_fragments.fragment import Fragment, FragmentResource from xmodule.util import builtin_assets -class AddSassToFragmentTests(TestCase): +class AddCssToFragmentTests(TestCase): """ - Tests for add_sass_to_fragment. + Tests for add_css_to_fragment. We would have liked to also test two additional cases: - * When a theme is enabled, and add_sass_to_fragment is called with a + * When a theme is enabled, and add_css_to_fragment is called with a theme-overriden Sass file, then a URL to themed CSS is added. - * When a theme is enabled, but add_sass_to_fragment is called with a Sass + * When a theme is enabled, but add_css_to_fragment is called with a Sass file that the theme doesn't override, then a URL to the original (unthemed) CSS is added. Unfortunately, under edx-platform tests, settings.STATICFILES_STORAGE does not @@ -27,15 +26,15 @@ class AddSassToFragmentTests(TestCase): def test_absolute_path_raises_value_error(self): fragment = Fragment() with self.assertRaises(ValueError): - builtin_assets.add_sass_to_fragment( + builtin_assets.add_css_to_fragment( fragment, - "/openedx/edx-platform/xmodule/assets/ProblemBlockDisplay.scss", + "/openedx/edx-platform/xmodule/assets/ProblemBlockDisplay.css", ) def test_not_scss_raises_value_error(self): fragment = Fragment() with self.assertRaises(ValueError): - builtin_assets.add_sass_to_fragment( + builtin_assets.add_css_to_fragment( fragment, "vertical/public/js/vertical_student_view.js" ) @@ -43,26 +42,17 @@ def test_not_scss_raises_value_error(self): def test_misspelled_path_raises_not_found(self): fragment = Fragment() with self.assertRaises(FileNotFoundError): - builtin_assets.add_sass_to_fragment( + builtin_assets.add_css_to_fragment( fragment, - "ProblemBlockDisplayyyy.scss", + "ProblemBlockDisplayyyy.css", ) - def test_static_file_missing_raises_improperly_configured(self): - fragment = Fragment() - with patch.object(builtin_assets, 'get_static_file_url', lambda _path: None): - with self.assertRaises(ImproperlyConfigured): - builtin_assets.add_sass_to_fragment( - fragment, - "ProblemBlockDisplay.scss", - ) - def test_happy_path(self): fragment = Fragment() - builtin_assets.add_sass_to_fragment(fragment, "ProblemBlockDisplay.scss") + builtin_assets.add_css_to_fragment(fragment, "ProblemBlockDisplay.css") assert fragment.resources[0] == FragmentResource( kind='url', - data='/static/css/ProblemBlockDisplay.css', + data=f'{settings.REPO_ROOT}/xmodule/assets/ProblemBlockDisplay.css', mimetype='text/css', placement='head', ) diff --git a/xmodule/util/builtin_assets.py b/xmodule/util/builtin_assets.py index aaedc44cc649..b7fd497072a3 100644 --- a/xmodule/util/builtin_assets.py +++ b/xmodule/util/builtin_assets.py @@ -7,42 +7,26 @@ import webpack_loader from django.conf import settings -from django.core.exceptions import ImproperlyConfigured -from openedx.core.djangoapps.theming.helpers_static import get_static_file_url - -def add_sass_to_fragment(fragment, sass_relative_path): +def add_css_to_fragment(fragment, css_relative_path): """ - Given a Sass path relative to xmodule/assets, add a compiled CSS URL to the fragment. + Given a css path relative to xmodule/assets, add a compiled CSS URL to the fragment. Raises: - * ValueError if {sass_relative_path} is absolute or does not end in '.scss'. - * FileNotFoundError if edx-platform/xmodule/assets/{sass_relative_path} is missing. - * ImproperlyConfigured if the lookup of the static CSS URL fails. This could happen - if Sass wasn't compiled, CSS wasn't collected, or the staticfiles app is misconfigured. - - Notes: - * This function is theme-aware. That is: If a theme is enabled which provides a compiled - CSS file of the same name, then that CSS file will be used instead. + * ValueError if {css_relative_path} is absolute or does not end in '.css'. + * FileNotFoundError if edx-platform/xmodule/assets/{css_relative_path} is missing. """ - if not isinstance(sass_relative_path, Path): - sass_relative_path = Path(sass_relative_path) - if sass_relative_path.is_absolute(): - raise ValueError(f"sass_relative_path should be relative; is absolute: {sass_relative_path}") - if sass_relative_path.suffix != '.scss': - raise ValueError(f"sass_relative_path should be .scss file; is: {sass_relative_path}") - sass_absolute_path = Path(settings.REPO_ROOT) / "xmodule" / "assets" / sass_relative_path - if not sass_absolute_path.is_file(): - raise FileNotFoundError(f"Sass not found: {sass_absolute_path}") - css_static_path = Path('css') / sass_relative_path.with_suffix('.css') - css_url = get_static_file_url(str(css_static_path)) # get_static_file_url is theme-aware. - if not css_url: - raise ImproperlyConfigured( - f"Did not find CSS file {css_static_path} (compiled from {sass_absolute_path}) " - f"in staticfiles storage. Perhaps it wasn't collected?" - ) - fragment.add_css_url(css_url) + if not isinstance(css_relative_path, Path): + css_relative_path = Path(css_relative_path) + if css_relative_path.is_absolute(): + raise ValueError(f"css_file_name should be relative; is absolute: {css_relative_path}") + if css_relative_path.suffix != '.css': + raise ValueError(f"css_file_name should be .css file; is: {css_relative_path}") + css_absolute_path = Path(settings.REPO_ROOT) / "xmodule" / "assets" / css_relative_path + if not css_absolute_path.is_file(): + raise FileNotFoundError(f"css file not found: {css_absolute_path}") + fragment.add_css_url(str(css_absolute_path)) def add_webpack_js_to_fragment(fragment, bundle_name): diff --git a/xmodule/video_block/video_block.py b/xmodule/video_block/video_block.py index b4fddb63fa7a..46cdcb590102 100644 --- a/xmodule/video_block/video_block.py +++ b/xmodule/video_block/video_block.py @@ -48,7 +48,7 @@ from xmodule.modulestore.inheritance import InheritanceKeyValueStore, own_metadata from xmodule.raw_block import EmptyDataRawMixin from xmodule.validation import StudioValidation, StudioValidationMessage -from xmodule.util.builtin_assets import add_webpack_js_to_fragment, add_sass_to_fragment +from xmodule.util.builtin_assets import add_webpack_js_to_fragment, add_css_to_fragment from xmodule.video_block import manage_video_subtitles_save from xmodule.x_module import ( PUBLIC_VIEW, STUDENT_VIEW, @@ -242,7 +242,7 @@ def student_view(self, context): Return the student view. """ fragment = Fragment(self.get_html(context=context)) - add_sass_to_fragment(fragment, 'VideoBlockDisplay.scss') + add_css_to_fragment(fragment, 'VideoBlockDisplay.css') add_webpack_js_to_fragment(fragment, 'VideoBlockDisplay') shim_xmodule_js(fragment, 'Video') return fragment @@ -260,7 +260,7 @@ def studio_view(self, _context): fragment = Fragment( self.runtime.service(self, 'mako').render_cms_template(self.mako_template, self.get_context()) ) - add_sass_to_fragment(fragment, 'VideoBlockEditor.scss') + add_css_to_fragment(fragment, 'VideoBlockEditor.css') add_webpack_js_to_fragment(fragment, 'VideoBlockEditor') shim_xmodule_js(fragment, 'TabsEditingDescriptor') return fragment @@ -276,7 +276,7 @@ def public_view(self, context): return self.student_view(context) fragment = Fragment(self.get_html(view=PUBLIC_VIEW, context=context)) - add_sass_to_fragment(fragment, 'VideoBlockDisplay.scss') + add_css_to_fragment(fragment, 'VideoBlockDisplay.css') add_webpack_js_to_fragment(fragment, 'VideoBlockDisplay') shim_xmodule_js(fragment, 'Video') return fragment diff --git a/xmodule/word_cloud_block.py b/xmodule/word_cloud_block.py index 26a2c38c5cfc..d678f2a9a9f5 100644 --- a/xmodule/word_cloud_block.py +++ b/xmodule/word_cloud_block.py @@ -15,7 +15,7 @@ from xblock.fields import Boolean, Dict, Integer, List, Scope, String from xmodule.editing_block import EditingMixin from xmodule.raw_block import EmptyDataRawMixin -from xmodule.util.builtin_assets import add_webpack_js_to_fragment, add_sass_to_fragment +from xmodule.util.builtin_assets import add_webpack_js_to_fragment, add_css_to_fragment from xmodule.xml_block import XmlMixin from xmodule.x_module import ( ResourceTemplates, @@ -262,7 +262,7 @@ def student_view(self, context): # lint-amnesty, pylint: disable=unused-argumen 'num_inputs': self.num_inputs, 'submitted': self.submitted, })) - add_sass_to_fragment(fragment, 'WordCloudBlockDisplay.scss') + add_css_to_fragment(fragment, 'WordCloudBlockDisplay.css') add_webpack_js_to_fragment(fragment, 'WordCloudBlockDisplay') shim_xmodule_js(fragment, 'WordCloud')