From 6bd6a28063397219a3d8f4f765a3baa1eeab57ff Mon Sep 17 00:00:00 2001 From: Muhammad Farhan Khan Date: Sat, 21 Sep 2024 17:32:42 +0500 Subject: [PATCH] chore: chore --- scripts/compile_sass.py | 2 +- xmodule/assets/HtmlBlockDisplay.css | 510 ++++++++++++++++++++++++++++ xmodule/assets/HtmlBlockEditor.css | 205 +++++++++++ 3 files changed, 716 insertions(+), 1 deletion(-) create mode 100644 xmodule/assets/HtmlBlockDisplay.css create mode 100644 xmodule/assets/HtmlBlockEditor.css diff --git a/scripts/compile_sass.py b/scripts/compile_sass.py index ec1efee24d2b..12dcd88f17b1 100755 --- a/scripts/compile_sass.py +++ b/scripts/compile_sass.py @@ -207,7 +207,7 @@ def compile_sass_dir( use_dev_settings: bool = NORMALIZED_ENVS[env] == "development" fs_encoding: str = sys.getfilesystemencoding() or sys.getdefaultencoding() output_style: int = SASS_STYLE_NESTED if use_dev_settings else SASS_STYLE_COMPRESSED - source_comments: int = SASS_COMMENTS_LINE_NUMBERS if use_dev_settings else SASS_COMMENTS_NONE + source_comments: int = SASS_COMMENTS_NONE if use_dev_settings else SASS_COMMENTS_NONE include_paths: bytes = os.pathsep.join(str(include) for include in includes).encode(fs_encoding) click.secho(f" {message}...", fg="cyan") diff --git a/xmodule/assets/HtmlBlockDisplay.css b/xmodule/assets/HtmlBlockDisplay.css new file mode 100644 index 000000000000..b89bb3c8c7ed --- /dev/null +++ b/xmodule/assets/HtmlBlockDisplay.css @@ -0,0 +1,510 @@ +@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,700"); + +.xmodule_display.xmodule_AboutBlock, +.xmodule_display.xmodule_CourseInfoBlock, +.xmodule_display.xmodule_HtmlBlock, +.xmodule_display.xmodule_StaticTabBlock { + /* stylelint-disable-line */ + /* stylelint-disable-line */ +} + +.xmodule_display.xmodule_AboutBlock *, +.xmodule_display.xmodule_CourseInfoBlock *, +.xmodule_display.xmodule_HtmlBlock *, +.xmodule_display.xmodule_StaticTabBlock * { + line-height: 1.4em; +} + +.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; +} + +.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; +} + +.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; +} + +.xmodule_display.xmodule_AboutBlock h3, +.xmodule_display.xmodule_CourseInfoBlock h3, +.xmodule_display.xmodule_HtmlBlock h3, +.xmodule_display.xmodule_StaticTabBlock h3 { + font-size: 1.2em; +} + +.xmodule_display.xmodule_AboutBlock h4, +.xmodule_display.xmodule_CourseInfoBlock h4, +.xmodule_display.xmodule_HtmlBlock h4, +.xmodule_display.xmodule_StaticTabBlock h4 { + font-size: 1em; +} + +.xmodule_display.xmodule_AboutBlock h5, +.xmodule_display.xmodule_CourseInfoBlock h5, +.xmodule_display.xmodule_HtmlBlock h5, +.xmodule_display.xmodule_StaticTabBlock h5 { + font-size: 0.83em; +} + +.xmodule_display.xmodule_AboutBlock h6, +.xmodule_display.xmodule_CourseInfoBlock h6, +.xmodule_display.xmodule_HtmlBlock h6, +.xmodule_display.xmodule_StaticTabBlock h6 { + font-size: 0.75em; +} + +.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); +} + +.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; +} + +.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; +} + +.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; +} + +.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; +} + +.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); +} + +.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)); +} + +.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); +} + +.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; +} + +.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; +} + +.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; +} + +.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); +} + +.xmodule_display.xmodule_AboutBlock img, +.xmodule_display.xmodule_CourseInfoBlock img, +.xmodule_display.xmodule_HtmlBlock img, +.xmodule_display.xmodule_StaticTabBlock img { + max-width: 100%; +} + +.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; +} + +.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; +} + +.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; +} + +.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; +} + +.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; +} + +.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; +} + +.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; +} + +.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; +} + +.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); +} + +.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; +} + +.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; +} + +.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; +} + +.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; +} + +.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; +} + +.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); +} + +.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; +} + +.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; +} + +.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; +} + +.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; +} + +.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; +} + +.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; +} + +.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; +} + +.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)); +} + +.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)); +} + +.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; +} + +.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; +} + +.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; +} + +.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; +} + +.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; +} + +.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/HtmlBlockEditor.css b/xmodule/assets/HtmlBlockEditor.css new file mode 100644 index 000000000000..49256f5b0f0b --- /dev/null +++ b/xmodule/assets/HtmlBlockEditor.css @@ -0,0 +1,205 @@ +@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,700"); + +.xmodule_edit.xmodule_AboutBlock, +.xmodule_edit.xmodule_CourseInfoBlock, +.xmodule_edit.xmodule_HtmlBlock, +.xmodule_edit.xmodule_StaticTabBlock { +} + +.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; +} + +.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; +} + +.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; +} + +.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; +} + +.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; +} + +.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; +} + +.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; +} + +.xmodule_edit.xmodule_AboutBlock .editor, +.xmodule_edit.xmodule_CourseInfoBlock .editor, +.xmodule_edit.xmodule_HtmlBlock .editor, +.xmodule_edit.xmodule_StaticTabBlock .editor { + position: relative; +} + +.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; +} + +.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; +} + +.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; +} + +.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; +} + +.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; +} + +.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); +} + +.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; +} + +.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)); +} + +.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; +} + +.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); +} + +.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); +} + +.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; +} + +.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; +} + +.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; +}