h5p.css (wip patch) RTL selectors for major h5p packages/libreries

Author: nadavkav

styles/h5p.css

@@ -455,3 +455,157 @@ div.h5p-fullscreen {
 .h5p-dialog-ok-button:active {
   background: #eeffee;
 }
+
+/* General (major) h5p packages/libraries RTL support 
+   
+   TODO: Split into each h5p package
+*/
+.h5p-dir-rtl,
+.h5peditor-dir-rtl {
+    direction: rtl;
+}
+/* h5p-multichoice */
+.h5p-dir-rtl.h5p-multichoice .h5p-alternative-container {
+    text-align: right;
+    padding: 0.25em 2.1em 0.25em 0.75em;
+}
+
+.h5p-dir-rtl.h5p-multichoice .h5p-alternative-inner {
+    margin: 0 2em 0 0.75em;
+}
+.h5p-dir-rtl.h5p-multichoice .h5p-answer .h5p-alternative-container:before {
+    right: 2.5em;
+    left: auto;
+}
+.h5p-dir-rtl.h5p-multichoice .h5p-question-image {
+    text-align: right;
+    padding-right: 2em;
+}
+.h5p-dir-rtl.h5p-multichoice .h5p-question-image-scalable:before {
+    left: 0.7em;
+    right: auto;
+}
+
+/* Quiz */
+.h5p-dir-rtl .h5p-multichoice .h5p-alternative-container {
+    text-align: right;
+    padding: 0.25em 2.1em 0.25em 0.75em;
+}
+.h5p-dir-rtl .h5p-multichoice .h5p-alternative-inner {
+    margin: 0 2em 0 0.75em;
+}
+.h5p-dir-rtl .h5p-multichoice .h5p-answer .h5p-alternative-container:before {
+    right: 2.5em;
+    left: auto;
+}
+.h5p-dir-rtl.h5p-blanks .h5p-wrong:after {
+    left: 0.5em;
+    right: auto;
+}
+.h5p-dir-rtl.h5p-blanks .h5p-correct:after {
+    left: 0.5em;
+    right: auto;
+}
+.h5p-dir-rtl.h5p-blanks .has-tip.h5p-correct:after, 
+.h5p-dir-rtl.h5p-blanks .has-tip.h5p-wrong:after {
+    left: 0.5em;
+    right: auto;
+}
+.h5p-dir-rtl .h5p-question .h5p-question-prev, 
+.h5p-dir-rtl .h5p-question .h5p-question-finish, 
+.h5p-dir-rtl .h5p-question .h5p-question-next {
+    float: left;
+}
+.h5p-dir-rtl .h5p-question .h5p-question-prev:before {
+    content: "\f054";
+}
+.h5p-dir-rtl .h5p-question .h5p-question-next:before {
+    content: "\f053";
+}
+.h5p-dir-rtl .h5p-joubelui-button:first-child {
+    margin: 0 0 1em 0.5em;
+}
+
+/* Memory game */
+.h5p-dir-rtl.h5p-memory-game .h5p-status > dt {
+    float: right;
+    margin: 0 0 0 1em;
+}
+.h5p-dir-rtl.h5p-memory-game .h5p-status {
+    clear: right;
+}
+/* summary */
+.h5p-dir-rtl.h5p-summary .summary-evaluation-content {
+    float: right;
+    padding: 0.1em 0 0.1em 2em;
+}
+
+/* Presentation */
+.h5p-dir-rtl.h5p-course-presentation .h5p-footer .h5p-footer-next-slide:after {
+    content: "\F0D9";
+}
+.h5p-dir-rtl.h5p-course-presentation .h5p-footer .h5p-footer-previous-slide:before {
+    font-family: H5PFontAwesome4;
+    content: "\F0DA";
+}
+.h5p-dir-rtl.h5p-course-presentation ol.list-unstyled, .h5p-course-presentation ul.list-unstyled {
+    padding-right: 0;
+}
+
+/* accordion */
+.h5p-dir-rtl .h5p-accordion .h5p-panel-title {
+    padding: 0.8em 2.25em 0.8em 0.8em;
+}
+.h5p-dir-rtl .h5p-accordion .h5p-panel-title:before {
+    content: "\f104";
+    right: 0.95em;
+    left: auto;
+}
+
+.h5p-dir-rtl li.h5p-sc-alternative .h5p-sc-status {
+    left: 0;
+    right: auto;
+}
+
+/* course presentation (and in general) */
+.h5p-dir-rtl p[dir=rtl] {
+    direction: rtl;
+    text-align: right;
+}
+.h5p-dir-rtl.h5p-course-presentation .h5p-footer {
+    direction: ltr;
+    flex-direction: inherit;
+}
+
+.h5p-dir-rtl .h5p-advanced-text ul li, 
+.h5p-dir-rtl .h5p-advanced-text ol li {
+    margin: 0 1.5em 1em 0;
+}
+
+/* timeline */
+.h5p-dir-rtl.h5p-timeline .vco-slider .nav-next {
+    float: left;
+    text-align: left;
+}
+.h5p-dir-rtl.h5p-timeline .vco-slider .nav-previous {
+    float: right;
+    text-align: right;
+}
+.h5p-dir-rtl.h5p-timeline .vco-slider .nav-previous {
+    left:0;
+}
+/* not really affective :-( */
+.h5p-dir-rtl.h5p-timeline .vco-timeline:not(.vco-skinny) .vco-slider .slider-item .content .content-container .media {
+    float: left !important;
+}
+.h5p-dir-rtl.h5p-timeline .vco-timeline:not(.vco-skinny) .vco-slider .slider-item .content .content-container .text {
+    float: right;
+}
+
+/* h5p-interactive-video */
+.h5p-dir-rtl.h5p-interactive-video :not([aria-disabled=true]).h5p-slider .ui-slider-handle:before {
+    margin: -5px -20px 0 0;
+}
+.h5p-dir-rtl.h5p-interactive-video .h5p-controls {
+    flex-direction: row-reverse;
+}