User:EPorto (WMB)/addin-mooc.css

/** * This CSS file is part of the MOOC Addin (https://en.wikiversity.org/wiki/Mooc-Module). * * It contains the CSS directives necessary to apply the layout to all the elements related to the MOOC Addin. *   * All MOOC Addin elements are placed inside of a wrapper element called "MOOC root". * This ensures to avoid collisions of the directives on/with other pages: * Every CSS/jQuery-Selector contains the MOOC root. * All other elements will not contain any MOOC prefixes, since it is not necessary to put them in context more than this. * Collisions between MOOC elements can still occur and thus CSS selectors should be as strong as possible, in the mean of limited to the smallest matching quantity. * * An overview of the page layout and the CSS namespaces can be found at * https://commons.wikimedia.org/wiki/File:Addin-Mooc-Css-Overview.pdf * * Note: * * The style of some elements depends on the application state, such as scroll bar position, and thus require the usage of JavaScript. * Thus some CSS directives are not included in this file but get set via JavaScript (jQuery) dynamically. * In future this could/should be strictly separated into *  1.) CSS directives limited to a state class and *   2.) JavaScript code en-/disabling these state classes */ -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
 * 1) addin-mooc .border-box {/* CSS 3 box model with padding included in element size */

/*#################### # CONTENT ####################*/ float: left; width: 100%; } margin-right: 260px; }
 * 1) addin-mooc #content-wrapper {
 * 1) addin-mooc #mooc-content {

/*#################### # ITEM NAVIGATION # sticky@scroll at upper screen border ####################*/ padding: 1px 20px; background-color: #FFF; border: 1px solid #E0E0E0; border-bottom: none; z-index: 1001; } text-decoration: none; } display: inline-block; margin-right: 20px; cursor: pointer; } margin-right: 2px; } padding: 0 2px; background-color: #EAEAEA; border-radius: 4px; border: 1px solid #E0E0E0; }
 * 1) addin-mooc #item-navigation {/* border-box */
 * 1) addin-mooc #item-navigation a:focus,
 * 2) addin-mooc #item-navigation a:hover {
 * 1) addin-mooc #item-navigation .section-link-wrapper {/* border-box */
 * 1) addin-mooc #item-navigation .section-link-wrapper img {
 * 1) addin-mooc #item-navigation .active {

/*#################### # SECTIONS ####################*/ position: relative; border: 1px solid #E0E0E0; overflow: hidden; /* do not move section due to content margin */ } border-top: none; /* smooth transition from section header to item navigation background */ } position: absolute; top: 0; width: 100%; padding: 5px 20px; color: #777; background: -moz-linear-gradient(top, #FFF 1%, #EAEAEA 100%); background: -o-linear-gradient(top, #FFF 1%, #EAEAEA 100%); background: -ms-linear-gradient(top, #FFF 1%, #EAEAEA 100%); background: -webkit-linear-gradient(top, #FFF 1%, #EAEAEA 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(1%, #FFF), color-stop(100%, #EAEAEA)); box-shadow: 0 0 0 1px rgba(155, 155, 155, .3), 1px 0 0 0 rgba(255, 255, 255, .9) inset, 0 2px 2px rgba(0, 0, 0, .1); border-bottom: 1px solid #E0E0E0; cursor: pointer; z-index: 1; } display: inline-block; margin-top: 5px !important; /* necessary to override global MediaWiki-CSS's important statement */ } float: left; margin-right: 7px; padding-top: 4px; } margin: 55px 0 0 0; padding: 20px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .2); overflow: hidden; }
 * 1) addin-mooc .section {
 * 1) addin-mooc .section:first-child {
 * 1) addin-mooc .section > .header {/* border-box */
 * 1) addin-mooc .section > .header h2 {
 * 1) addin-mooc .section > .header .icon {/* Q: can we use a background image instead? */
 * 1) addin-mooc .section > .content {

/*#################### # EMPTY SECTION HINTS # info box asking for content ####################*/ color: #705000; font-size: 120%; } min-height: 48px; margin-top: 10px; padding: 10px 10px 10px 70px; color: #000; background: url('https://upload.wikimedia.org/wikipedia/commons/b/b0/Gnome-help-browser-modified.svg') no-repeat 10px center; border: 1px solid #705000; font-size: 83.33%; } color: #0645AD; cursor: pointer; } text-decoration: underline; }
 * 1) addin-mooc .section .empty-section {
 * 1) addin-mooc .section .empty-section .add-content-hint {
 * 1) addin-mooc .section .empty-section .add-content-hint .edit-text {
 * 1) addin-mooc .section .empty-section .add-content-hint .edit-text:hover {

/*#################### # SECTION COLLAPSE # UI to expand/effects when collapsed ####################*/ height: 40px; text-align: center; cursor: pointer; } overflow: hidden; } content: ''; position: absolute; right: 0; bottom: 40px; left: 0; height: 30px; background: linear-gradient(to top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)); }
 * 1) addin-mooc .btn-expand {
 * 1) addin-mooc .collapsed > .content {
 * 1) addin-mooc .collapsed > .content:after {

/*#################### # SECTION: ASSOCIATED UNITS # units the current lesson/MOOC contains; add item UI ####################*/ /* add new unit/lesson/mooc; does also apply for lessons section and MOOC category page */ cursor: pointer; } /* unit layout; does also apply for lessons section (units listed recursively) */ display: block; position: relative; width: auto; min-height: 170px; margin: 30px 0 0 0; padding: 10px; border: 1px solid #E0E0E0; cursor: pointer; } margin-top: 0; } visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } float: left; width: 300px; } /* video thumbnails; does also apply for local navigation thumbails */ width: 300px; height: 170px; margin-bottom: 5px; text-align: center; background-color: #EEE; box-shadow: 0 0 0 1px rgba(0, 0, 0, .2); overflow: hidden; z-index: 1502; } width: 100%; height: 100%; display: table; } display: table-cell; vertical-align: middle; } display: none; /* hide play button rendered with thumbnail */ } margin-left: 320px; } margin: 5px 0 10px 0; font-size: 1.17em; font-weight: bold; line-height: 1.6; } margin: 0; padding: 0; } display: inline-block; margin-right: 15px; list-style: none; /* Q: can we move this to parental list? */ opacity: 0.4; } position: absolute; top: 10px; right: 0; } float: right; padding-top: 10px; } float: left; padding: 5px; background-color: #EEE; border-radius: 3px; } margin-bottom: 4px; text-align: center; } padding: 5px; border-radius: 3px; text-align: center; } font-size: 120%; } font-size: 80%; line-height: 1; } padding: 4px; color: #E21; border: 1px solid #E21; } margin: 0; padding: 0; list-style-position: inside; overflow: hidden; } margin-bottom: 3px; }
 * 1) addin-mooc #addLesson,
 * 2) addin-mooc #addMooc,
 * 3) addin-mooc #addUnit {
 * 1) addin-mooc #units .children .unit,
 * 2) addin-mooc #lessons .children .lesson .children .unit {/* Q: can we remove .children safely? */
 * 1) addin-mooc #units .unit:first-child,
 * 2) addin-mooc #lessons .children .lesson .children .unit:first-child {
 * 1) addin-mooc .children .unit:after,
 * 2) addin-mooc .children .lesson:after {/* Q: WTF is this? */
 * 1) addin-mooc #units .unit .video-bar,
 * 2) addin-mooc #lessons .unit .video-bar {
 * 1) addin-mooc #units .unit .video,
 * 2) addin-mooc #lessons .unit .video,
 * 3) addin-mooc #local-navigation .video {
 * 1) addin-mooc #units .unit .video div,
 * 2) addin-mooc #lessons .unit .video div,
 * 3) addin-mooc #local-navigation .video div {
 * 1) addin-mooc #units .unit .video div span,
 * 2) addin-mooc #lessons .unit .video div span,
 * 3) addin-mooc #local-navigation .video div span {
 * 1) addin-mooc #units .unit .video .play-btn-large,
 * 2) addin-mooc #lessons .unit .video .play-btn-large,
 * 3) addin-mooc #local-navigation .video .play-btn-large {
 * 1) addin-mooc #units .unit .content,
 * 2) addin-mooc #lessons .unit .content {
 * 1) addin-mooc #units .unit .content > .title,
 * 2) addin-mooc #lessons .unit .content > .title {
 * 1) addin-mooc #units .unit .icon-bar ul,
 * 2) addin-mooc #lessons .unit .icon-bar ul {
 * 1) addin-mooc #units .unit .icon-bar li,
 * 2) addin-mooc #lessons .unit .icon-bar li {
 * 1) addin-mooc #units .unit .discussion-statistic-wrapper,
 * 2) addin-mooc #lessons .unit .discussion-statistic-wrapper {
 * 1) addin-mooc #units .unit .discussion-statistic-wrapper .img-arrow img,
 * 2) addin-mooc #lessons .unit .discussion-statistic-wrapper .img-arrow img {
 * 1) addin-mooc #units .unit .discussion-statistic,
 * 2) addin-mooc #lessons .unit .discussion-statistic {
 * 1) addin-mooc #units .unit .discussion-statistic .icon,
 * 2) addin-mooc #lessons .unit .discussion-statistic .icon {
 * 1) addin-mooc #units .unit .discussion-statistic .stat-row,
 * 2) addin-mooc #lessons .unit .discussion-statistic .stat-row {
 * 1) addin-mooc #units .unit .discussion-statistic .num,
 * 2) addin-mooc #lessons .unit .discussion-statistic .num {
 * 1) addin-mooc #units .unit .discussion-statistic .title,
 * 2) addin-mooc #lessons .unit .discussion-statistic .title {
 * 1) addin-mooc #units .unit .discussion-statistic .unanswered,
 * 2) addin-mooc #lessons .unit .discussion-statistic .unanswered {
 * 1) addin-mooc #units .unit .learning-goals ol,
 * 2) addin-mooc #lessons .unit .learning-goals ol {
 * 1) addin-mooc #units .unit .learning-goals li,
 * 2) addin-mooc #lessons .unit .learning-goals li {

/*#################### # SECTION: DISCUSSION # threads, posts, ask/reply UI ####################*/ margin-left: 25px; } list-style: none;/* Q: can we move this to parental list? */ } display: inline-block; width: 60%; } float: right; width: 6em; font-size: 0.8em; text-align: right; } overflow: hidden; } position: relative; margin: 2px 2px 5px 2px; padding: 10px 10px 20px 10px; background: none repeat scroll 0 0 #F4F7FB; border: 1px solid #E0E0E0; border-radius: 4px; } position: absolute; right: 5px; bottom: 1px; color: #777; } color: #705000; } right: 0; } border-top-left-radius: 10px; border-bottom-left-radius: 10px; } padding: 5px; cursor: pointer; } margin-top: 15px; } display: block; } width: 100%; padding: 2px; resize: none; /* hide resize UI for element */ overflow: hidden; } display: block; width: 120px; margin: 10px auto 0; padding: 5px; background-color: #FFF; text-align: center; box-shadow: 0 0 3px 2px rgba(0, 0, 0, .2); cursor: pointer; }
 * 1) addin-mooc #discussion .thread ol {
 * 1) addin-mooc #discussion li {
 * 1) addin-mooc #discussion .thread .header .title {
 * 1) addin-mooc #discussion .thread .header .num-replies {
 * 1) addin-mooc #discussion .post > .content {
 * 1) addin-mooc #discussion .post > .content > .message {
 * 1) addin-mooc #discussion .meta {
 * 1) addin-mooc #discussion .warning {
 * 1) addin-mooc #discussion .overlay {
 * 1) addin-mooc #discussion .overlay .background {
 * 1) addin-mooc #discussion .overlay .content {
 * 1) addin-mooc .ask-question {
 * 1) addin-mooc .ask-question .label {
 * 1) addin-mooc .ask-question textarea,
 * 2) addin-mooc .ask-question .title,
 * 3) addin-mooc .ui-reply textarea {/* border-boxed */
 * 1) addin-mooc .ask-question .btn-ask {

/*#################### # SECTION: LESSONS # lessons the current MOOC contains ####################*/ display: block; width: auto; padding-top: 50px; } padding-top: 0; } margin-top: 5px; margin-bottom: 0.25em; font-size: 1.5em; font-weight: bold; line-height: 1.3; border-bottom: 1px solid #AAA; }
 * 1) addin-mooc #lessons .children .lesson {/* Q: can we remove .children safely? */
 * 1) addin-mooc #lessons .children .lesson:first-child {
 * 1) addin-mooc #lessons .children .lesson > .title {

/*#################### # NAVIGATION # sticky@scroll at upper screen border ####################*/ position: absolute; right: 0; width: 250px; } width: 250px; padding: 0; background: #FFF; overflow: hidden; /* prevents lists's margin to move item */ } position: absolute; width: 100%; padding-top: 25px; border: 1px solid #E0E0E0; } padding: 5px 20px 11px 20px; background: -moz-linear-gradient(top, #FFF 1%, #EAEAEA 100%); background: -o-linear-gradient(top, #FFF 1%, #EAEAEA 100%); background: -ms-linear-gradient(top, #FFF 1%, #EAEAEA 100%); background: -webkit-linear-gradient(top, #FFF 1%, #EAEAEA 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(1%, #FFF), color-stop(100%, #EAEAEA)); } margin: -9px 5px 0 0; /* Q: can this be put into background, too? */ } display: inline-block; margin: 5px 0 0.25em 0; padding: 0; line-height: 1.3; font-size: 1.5em; font-family: "Linux Libertine",Georgia,Times,serif; border-bottom: 1px solid #AAA; } margin: 81px 0 0 0; padding: 10px; border: 1px solid #E0E0E0; border-top: none; font-size: 0.85em; list-style-position: inside; overflow: hidden; /* prevents lists's margin to move item */ }
 * 1) addin-mooc #navigation-wrapper {
 * 1) addin-mooc #navigation {
 * 1) addin-mooc #navigation .header-wrapper {/* border-box */
 * 1) addin-mooc #navigation .header {
 * 1) addin-mooc #navigation .header img {
 * 1) addin-mooc #navigation .header > div {/* emulate h2 behaviour which we can not use in templates */
 * 1) addin-mooc #navigation > ol {

/*#################### # LOCAL NAVIGATION # video thumbnails for next/previous unit and parental lesson # @see{#units} for thumbnail style ####################*/ display: inline-block; width: 300px; margin: 10px 5px; padding: 10px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .2); cursor: pointer; }
 * 1) addin-mooc #local-navigation > .previous,
 * 2) addin-mooc #local-navigation > .next {

/*#################### # ACTION BUTTONS # in section headers ####################*/ float: right; } list-style: none; } display: none; float: right; margin-left: 15px; } margin-top: 12px; } margin-top: 6px; }
 * 1) addin-mooc .actions {
 * 1) addin-mooc .actions ul {
 * 1) addin-mooc .actions > div {
 * 1) addin-mooc .actions .btn-ask-question {
 * 1) addin-mooc .actions .btn-edit {

/*#################### # MODAL BOXES # hidden until activated in JS ####################*/ position: fixed; width: 100%; height: 100%; top: 0; left: 0; cursor: default; z-index: 1502; /* video thumbnails will overlap if value below */ } position: fixed; width: 100%; height: 100%; background-color: #050404; opacity: 0.87; } position: relative; width: 90%; height: 80%; left: 0; right: 0; top: 10%; margin: 0 auto; padding: 25px 20px; color: #000; background-color: #FFF; border-radius: 8px; overflow: visible; } float: right; top: 0; width: 40px; height: 40px; margin: -40px -40px 0 0; background: #FFF url("http://upload.wikimedia.org/wikipedia/commons/thumb/6/60/Close_icon.svg/64px-Close_icon.svg.png") no-repeat center; box-shadow: 0 0 3px 2px rgba(0, 0, 0, .2); border-radius: 20px; cursor: pointer; z-index: 2; } display: block; width: auto; min-width: 120px; margin: 15px auto 0 auto; padding: 10px 10px 10px 35px; color: #000; background: url('https://upload.wikimedia.org/wikipedia/commons/thumb/c/c9/True.svg/20px-True.svg.png') no-repeat 12px 8px; text-align: center; box-shadow: 0 0 3px 2px rgba(0, 0, 0, .2); cursor: pointer; } color: #DCDAD1; } height: auto; } font-weight: bold; line-height: 1.6; } font-size: 1.17em; } display: inline-block; margin-top: 25px; } width: 100%; padding: 2px 5px; border-radius: 3px; border: 1px solid #AEAEAE; } height: 200px; } min-height: 48px; margin-top: 25px; padding: 10px 10px 10px 70px; background: url('https://upload.wikimedia.org/wikipedia/commons/4/44/Help-browser.svg') no-repeat 10px center; border: 1px solid #705000; }
 * 1) addin-mooc .modal-box {
 * 1) addin-mooc .modal-box .background {
 * 1) addin-mooc .modal-box .content {/* border-box */
 * 1) addin-mooc .modal-box .btn-close {
 * 1) addin-mooc .modal-box .btn-save {
 * 1) addin-mooc .modal-box input[disabled].btn-save {
 * 1) addin-mooc .modal-box fieldset {
 * 1) addin-mooc .modal-box label {
 * 1) addin-mooc .modal-box .label-title {
 * 1) addin-mooc .modal-box .label-summary {
 * 1) addin-mooc .modal-box input,
 * 2) addin-mooc .modal-box textarea {
 * 1) addin-mooc .modal-box textarea {/* TODO: auto height */
 * 1) addin-mooc .modal-box .help {

/*#################### # OVERLAYS # such as reply buttons (single use case at the moment) # hidden until activated in JS ####################*/ display: none; position: absolute; } position: relative; } position: relative; z-index: 2; } position: absolute; width: 100%; height: 100%; background-color: #668; opacity: 0.5; z-index: 1; }
 * 1) addin-mooc .overlay {
 * 1) addin-mooc .overlay > span {
 * 1) addin-mooc .overlay .content {
 * 1) addin-mooc .overlay .background {