Current Path : C:/xampp/htdocs/moodle/mod/hvp/editor/styles/scss/ |
Current File : C:/xampp/htdocs/moodle/mod/hvp/editor/styles/scss/application.scss |
@import "compass/css3/border-radius"; @import "compass/css3/box-shadow"; @import "compass/css3/opacity"; @import "compass/css3/text-shadow"; @import "compass/css3/transition"; @import "compass/css3/transform"; @import "variables"; @import "mixins"; @import "utils"; @import "form-field"; @import "form-groups"; @import "h5peditor-image-edit"; @import "h5peditor-image-edit-popup"; @import "deprecated"; html, body { margin: 0; padding: 0; color: $text-color; font-family: $font-family; max-width: 960px; position: relative; } a { text-decoration: none; } .h5peditor { font-size: 16px; .h5p-more-libraries { font-size: 0.875em; margin-top: 0.4em; } .h5peditor-single > .field.library { border: 0; padding: 0; } .cke_dialog_background_cover { width: 100% !important; height: 100% !important; } .errors p, .h5p-errors { color: #da0001; white-space: normal; } textarea { resize: vertical; } .h5p-editor-flex-wrapper { display: flex; flex-direction: row; } .h5peditor-label-wrapper { display: flex; flex-direction: row; } .has-important-description { .h5peditor-field-description { display: none; } .h5peditor-label-wrapper { float: left; } } .important-description-visible { .h5peditor-field-important-description { display: block; } .h5peditor-label-wrapper { float: none; } .important-description-show { display: none; } } textarea, .h5peditor-text, .ckeditor { @include box-shadow($form-input-box-shadow); box-sizing: border-box; margin: 0; padding: $min-padding; min-height: 40px; border: 1px solid $form-border-color; background: $form-input-color; outline: none; font-size: 16px; word-wrap: break-word; &.error { border-color: red; } } .h5peditor-text, textarea { width: 100%; box-sizing: border-box; &.error { border-color: red; } } /* Placeholders - need to be on separate lines. If not, the browsers will invalidate them */ textarea:focus::-webkit-input-placeholder, input:focus::-webkit-input-placeholder { color: $form-input-focus-placeholder-color; } textarea:focus:-moz-placeholder, input:focus:-moz-placeholder { color: $form-input-focus-placeholder-color; } textarea:focus::-moz-placeholder, input:focus::-moz-placeholder { color: $form-input-focus-placeholder-color; } textarea:focus:-ms-input-placeholder, input:focus:-ms-input-placeholder { color: $form-input-focus-placeholder-color; } textarea:focus.h5peditor-ckeditor-placeholder, input:focus.h5peditor-ckeditor-placeholder { color: $form-input-focus-placeholder-color; } ::-webkit-input-placeholder { color: $form-input-placeholder-color; } :-moz-placeholder { color: $form-input-placeholder-color; } ::-moz-placeholder { color: $form-input-placeholder-color; } :-ms-input-placeholder { color: $form-input-placeholder-color; } .h5peditor-ckeditor-placeholder { color: $form-input-placeholder-color; } & > select, .h5peditor-language-switcher select, h5peditor-select, .field > select { padding: 10px 30px 10px 8px; font-family: $font-family; font-size: 16px; border: 1px solid $form-border-color; background: $form-input-color inline-image('down.png') no-repeat; background-position: calc(100% - 10px); @include box-shadow($form-input-box-shadow); -moz-appearance: none; -webkit-appearance: none; &:disabled { background-color: #efefef; } } & > select { margin-bottom: 13px; margin-right: 20px; } select::-ms-expand { display: none; } a:focus { outline: none; } textarea:focus, .h5peditor-text:focus { outline: none; background-color: $white; border-color: #53a0ff; } .h5p-ul { padding: 0; margin: 0; list-style: none; .h5p-li { @include field-margin($min-padding); padding: 0; list-style: none; &.placeholder { box-sizing: border-box; background: #e8f2fa; border: dashed 2px #2782d1; } &:hover { text-decoration: none; } &:nth-child(2).moving { margin-top: 0; } &:nth-last-child(2).placeholder { margin-bottom: 0; } } } .dimensions input, .coordinates input, .number input { width: 75px; } .number input[type="range"] { width: 300px; float: left; margin: 7px 8px 0 0; } .h5p-errors { clear: both; } .h5p-add-file { float: left; position: relative; background: transparent; border: 2px dashed #dddddd; color: #dddddd; margin: 0.5em; width: 6em; height: 4.5em; cursor: pointer; outline: none; box-sizing: border-box; -moz-box-sizing: border-box; &:focus, &:hover { color: #999; border-color: #999; } &.hidden { visibility: hidden; } } .h5p-add-file:after { position: absolute; content: "+"; font-size: 2em; line-height: 2.2em; width: 100%; height: 100%; text-align: center; } .h5p-add-dialog { position: absolute; z-index: 1; visibility: hidden; opacity: 0; background: #fff; left: 1em; right: 1em; top: 1em; border: 1px solid #cdcdcd; box-sizing: border-box; -moz-box-sizing: border-box; @include box-shadow(0 0 8px #666); @include transition(visibility 0s 0.2s, opacity 0.2s); &.h5p-open { visibility: visible; opacity: 1; @include transition(visibility 0s 0s, opacity 0.2s); } .h5p-add-dialog-table { overflow: hidden; .av-tablist { overflow: hidden; margin: 1em 1em 0 1em; } .av-tab { cursor: pointer; float: left; padding: 0.5em 0.75em; border-top: 1px solid #ccc; border-right: 1px solid #ccc; font-weight: bold; font-size: 15px; color: #666; background: #f5f5f5; &:first-child { border-left: 1px solid #ccc; } &.selected { color: #333; background: #fff; } } .av-tabpanel { border: 1px solid #ccc; margin: 0 1em 1em 1em; overflow: hidden; padding: 1em; h3 { margin: 0 0 1em 0; } .h5p-file-drop-upload { width: 90px; margin: 0; } } .h5p-dialog-box { float: left; padding: 0; width: 60%; margin-right: 5%; margin-left: 4%; text-align: left; margin-top: 30px; &:first-child { width: 22%; margin-left: 3%; margin-right: 1%; h3 { text-align: center; } } } h3 { color: #666; font-size: 1em; margin: 1.2em 0; line-height: 1.1em; } .h5peditor-field-description { color: #bbb; } .h5p-file-url-wrapper { background-color: #f5f5f5; border: 1px solid #bbb; padding: 15px 15px 15px 60px; position: relative; &:before { font-family: 'H5P'; position: absolute; left: 0; top: 0.083em; font-size: 3.8em; line-height: 1; } &.video:before { content: "\e904"; color: #dd0505; } &.audio:before { content: "\e913"; color: #747275; } input { border-color: #bbb; text-align: left; padding-left: 20px; } } .h5p-file-drop-upload { position: relative; width: 70%; height: 90px; margin: 0 15%; float: left; background-color: #f5f5f5; text-align: center; cursor: pointer; border: 1px solid #bbb; .h5p-file-drop-upload-inner { border: 2px dashed #bbb; background-color: white; position: absolute; top: 3px; bottom: 3px; left: 3px; right: 3px; &:after { font-family: "H5P"; line-height: 1.4em; font-size: 3.5em; color: #bbb; } &.video:after { content: "\e903"; } &.audio:after { content: "\e914"; } } &:hover, &.over { .h5p-file-drop-upload-inner:after { color: #999; } } } .h5p-or-vertical { float: left; position: relative; width: 5%; height: 250px; } } .h5p-dialog-box { text-align: center; padding: 1em 0.5em; } .h5p-buttons { padding: 0.5em; border-top: 1px solid #cdcdcd; background: #ddd; text-align: right; } } .h5p-or { border-bottom: 1px solid #cdcdcd; padding: 0; margin: 0 1em; text-align: center; height: 0.5em; line-height: 1em; & > span { background: #fff; padding: 0 0.5em; } } .h5p-or-vertical { float: left; position: relative; width: 50px; height: 80px; .h5p-or-vertical-line { position: absolute; margin: 10px 0; left: 49%; top: 0; bottom: 0; width: 1px; background: #ccc; z-index: 1; } .h5p-or-vertical-word-wrapper { text-align: center; height: 18px; position: absolute; left: 0; right: 0; top: 22%; margin-top: -12px; z-index: 2; .h5p-or-vertical-word { color: #999; font-weight: bold; font-size: 18px; padding: 3px; background: #fff; } } } .h5p-file-url { text-align: center; } .h5p-thumbnail { margin: 0.5em; width: 6em; height: 4.5em; display: block; float: left; position: relative; @include box-shadow(0 0 10px 0 #666666); border: 1px solid #fff; box-sizing: border-box; -moz-box-sizing: border-box; .h5p-remove { position: absolute; top: 0; right: 0; cursor: pointer; outline: none; width: 1.6em; height: 1.6em; line-height: 1.6em; overflow: hidden; text-indent: -0.4em; padding: 0.065em; @include opacity(0.6); } .h5p-remove:hover, .h5p-remove:focus { @include opacity(1); } .h5p-remove:after { font-family: $icon-font-family; font-size: 2em; color: #fff; content: "\e890"; @include opacity(0.6); } } .h5p-type { position: absolute; width: 100%; height: 100%; font-size: 1.1em; line-height: 4em; display: block; text-align: center; background: #000; color: #fff; cursor: pointer; } .file { position: relative; float: left; margin-bottom: 0; max-width: 100%; &.authorList { float: none; } &.field { float: none; } .thumbnail { display: inline-block; margin: 10px 10px 10px 0; @include box-shadow(0 0 10px 0 #666666); border: 1px solid #fff; cursor: pointer; max-width: 100%; min-width: 1em; min-height: 1em; background: $form-input-color inline-image('transparent-background.png') repeat; } .thumbnail:focus { @include box-shadow(0 0 10px 0 #222); } .add { display: inline-block; cursor: pointer; padding: 0.5em 1.5em 0.5em 3em; background: linear-gradient(to bottom, #fbfbfb 0, #f2f2f2 100%); border: 1px solid #d0d0d1; border-radius: 0.25em; color: #222222; font-weight: bold; line-height: normal; &:hover { background: #ededed; } &:focus { box-shadow: 0 0 16px 0 rgba(133,188,255,0.84); } .h5peditor-field-file-upload-text:before { font-family: $icon-font-family; content: "\e902"; line-height: 1; color: #39c943; font-size: 2em; position: absolute; left: 0.3em; top: 0.1em; } } .remove { display: block; position: absolute; top: 7px; right: 7px; cursor: pointer; } .remove:focus:before { @include opacity(1); } .remove:before { font-family: $icon-font-family; font-size: 1.4em; color: #fff; content: "\e890"; @include opacity(0.6); @include text-shadow(rgba(black, 0.4) 0 0 4px, rgba(black, 0.4) 0 0 4px, rgba(black, 0.4) 0 0 4px); } .remove:hover { text-decoration: none; } .remove:hover:before { color: #fff; @include opacity(1); @include text-shadow(rgba(black, 0.4) 0 0 4px, rgba(black, 0.4) 0 0 4px, rgba(black, 0.4) 0 0 4px); } img { max-width: 100%; vertical-align: bottom; max-height: 100px; } .h5p-av-row { overflow: auto; margin-bottom: 0.5em; .h5p-thumbnail { display: table-cell; } .h5p-video-quality { display: table-cell; overflow: hidden; width: 10000px; padding-left: 1em; input.h5peditor-text { width: 100%; } } } .h5p-av-cell { overflow: auto; float: left; } } .video .file, .audio .file { position: static; overflow: visible; .thumbnail, .add { float: left; } .add { margin-top: 8px; } .thumbnail { overflow: visible; position: relative; cursor: auto; } .remove { top: -3px; right: -5px; } .type { padding: 16px 8px 4px; background: #000; color: #fff; font-size: 10px; } .h5peditor-uploading { float: left; margin: 0.5em; } } .libwrap { margin-top: $padding; &.no-margin, &:empty { margin-top: 0; } } input[type="checkbox"] { margin: 4px 4px 4px 0; vertical-align: bottom; } .moving { position: absolute; z-index: 1; @include opacity(0.8); -webkit-transform: translateZ(0); .h5peditor-label { cursor: grabbing; cursor: -moz-grabbing; cursor: -webkit-grabbing; } } .h5peditor-uploading, .h5peditor-loading { padding-top: 10px; padding-bottom: 6px; font-size: 14px; } .h5peditor-loading { padding: 0.875em 0 1em 3.25em; font-style: italic; } .h5p-copyright-button { @include border-radius(0.25em); height: 30px; background: linear-gradient(to bottom, #fff 0, #f2f2f2 100%); border: 1px solid $form-border-color; color: $black; font-size: $font-size-small; line-height: $form-item-height-small; padding-right: $padding; padding-left: 0; clear: both; font-weight: normal; &:before { font-family: $icon-font-family; content: "\e88f"; color: #666; padding: 0 0.25em 0 0.25em; vertical-align: middle; font-size: 1.5em; line-height: 0.9; } &:hover:not([disabled]) { background: linear-gradient(to bottom, #fff 0, #d0d0d1 100%); text-decoration: none; border-color: #999; } } .h5p-copyright-button:focus { box-shadow: 0 0 16px 0 rgba(133, 188, 255, 0.84); } /* Copyright button for video & audio */ .field.file > .h5p-copyright-button, .field.video > .h5p-copyright-button, .field.audio > .h5p-copyright-button { float: left; } .h5p-editor-dialog { position: absolute; z-index: 2; margin: 5.5em 0 1em; visibility: hidden; opacity: 0; height: 0; overflow: hidden; background: #fff; @include box-shadow(0 0 8px #666); @include transition(visibility 0s 0.2s, height 0s 0.2s, opacity 0.2s, margin-top 0.2s); &.h5p-open { margin-top: 3.5em; visibility: visible; opacity: 1; height: auto; @include transition(visibility 0s 0s, height 0s 0s, opacity 0.2s, margin-top 0.2s); } & > .field { margin: 0; border: 0; box-shadow: none; } .content { border: none; background: $white; .h5peditor-label { font-size: $font-size-large; font-weight: 600; } } .h5p-close { color: #494949; &:before { font-size: 2em; right: -0.125em; top: 0; position: absolute; z-index: 1; font-family: $icon-font-family; content: "\e894"; line-height: 1em; @include transition(scale 0.2s); } &:hover:before { @include scale(1.1, 1.1); } } } .h5p-li > .content > .library { border: 0; padding: 0; } } .h5p-editor-dialog.h5p-dialog-wide { width: 90%; border-radius: 0.208em; } /* Placed this outside of .h5peditor context above. Don't want it to be more specific than neccessary (because of overriding) */ .h5peditor-button-textual { @include border-radius(0.25em); @include button-background( $form-item-importance-medium-background, $form-item-importance-medium-background-highlight); display: inline-block; width: auto; margin: $min-padding 0 0 0; padding: 0 $padding; box-sizing: border-box; height: $form-item-height-normal; border: 1px solid $form-border-color; font-size: $font-size-normal; font-family: $font-family; line-height: $form-item-height-normal; color: $white; cursor: pointer; font-weight: 600; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; &:focus { box-shadow: 0 0 16px 0 rgba(133, 188, 255, 0.84); } &:before, &:after { color: $white; } .h5p-editing-image-button:before { font-family: $icon-font-family; content: "\e900"; color: #666; padding-right: 0.25em; vertical-align: middle; font-size: 1.5em; line-height: 0.9; } &:hover:not([disabled]) { @include button-background( $form-item-importance-medium-background-hover, $form-item-importance-medium-background-hover-highlight); text-decoration: none; } &.importance-high { @include button-background( $form-item-importance-high-background, $form-item-importance-high-background-highlight); border-color: $form-item-importance-high-border-color; text-transform: uppercase; height: $form-item-height-large; line-height: $form-item-height-large; &:hover:not([disabled]) { @include button-background( $form-item-importance-high-background-hover, $form-item-importance-high-background-hover-highlight); border-color: $form-item-importance-high-background-hover; } } &.importance-low { @include button-background( $form-item-importance-low-background, $form-item-importance-low-background-highlight); border-color: $form-item-importance-low-border-color; color: $black; &:before, &:after { color: $black; } &:hover:not([disabled]) { @include button-background( $form-item-importance-low-background-hover, $form-item-importance-low-background-hover-highlight); border-color: $form-item-importance-low-background-hover; } } &[disabled], &[aria-disabled="true"] { background: #f5f5f5; color: #707171; border-color: #eeeeee; cursor: not-allowed; &:before { font-family: $icon-font-family; content: "\e912"; color: #707171; margin-right: 0.5em; vertical-align: top; } } } .h5peditor-field-description, .h5p-help-text { font-size: 12px; margin-top: 0.3em; margin-bottom: 1em; font-weight: 500; color: #434446; line-height: 15px; letter-spacing: 0.5px; } .h5peditor-field-important-description { position: relative; padding: 1.5em 2.2em 2em 2.2em; font-size: 0.9em; margin: 0 0 20px 0; border: 1px solid #ffde78; background-color: #f9f9d8; color: #000; display: none; .important-description-close { position: absolute; font-size: 0.9em; line-height: 2em; right: 1.5em; top: 1em; user-select: none; cursor: pointer; &:before { font-family: $icon-font-family; content: "\e894"; vertical-align: top; font-size: 1.6em; } } .h5p-info-icon { font-size: 0.75em; &:before { font-family: $icon-font-family; content: "\e909"; font-size: 2.3em; line-height: 0.94em; margin-left: -0.3em; vertical-align: middle; } } .important-description-title { font-weight: bold; font-size: 1.2em; vertical-align: bottom; } .important-description-content { ul { padding: 0; line-height: 2em; margin-top: 20px; li { line-height: 1.8em; margin-left: 1.5em; } } } .important-description-example { border: 1px solid #bbde98; background-color: #d9fac3; display: flex; margin-top: 20px; .important-description-example-title { padding: 15px; font-weight: bold; } .important-description-example-text { padding: 15px; width: 100%; background-color: #f6fef1; } } } .h5peditor-form { position: relative; background: $form-background; border: 1px solid $form-border-color; &.h5peditor-form-manager { > .tree, > .common, > .field { max-width: 918px; margin: 20px auto; padding: 0 20px; } } &.h5peditor-semi-fullscreen { margin: 0; position: fixed; overflow-y: scroll; margin-top: 40px; padding-bottom: 40px; box-sizing: border-box; background: #fff; height: calc(100% - 40px); } } .h5peditor-label { display: block; margin-bottom: 6px; font-weight: 600; font-size: $font-size-normal; color: $form-label; } #h5peditor-uploader { position: absolute; width: 1px; height: 1px; top: -1px; border: 0; overflow: hidden; } @import "tutorial-and-example-links"; .h5peditor-widget-select { overflow: hidden; margin: 0 0 -1px; padding: 0; list-style: none; } .h5peditor-widget-option { float: right; border: 1px solid #ccc; border-bottom: 0; margin-left: 0.5em; padding: 0.6em 1em; color: #0E1A25; font-size: 0.875em; background: #f5f5f5; line-height: 1.285714286em; cursor: pointer; outline: none; } .h5peditor-widget-option:hover { color: #000; } .h5peditor-widget-option:active { color: #8e636a; /* Pink chocolate */ } .h5peditor-widget-active { background: #fff; line-height: 1.357142857em; } .h5peditor-widgets > .h5peditor-widget-wrapper { border: 1px solid #ccc; margin: 0 0 0.25em; padding: 0.5em; } .h5peditor-widgets > .h5peditor-label { float: left; margin-top: 5px; } .h5p-editor-iframe { margin-bottom: 1em; } .h5peditor-required:after { content: "*"; color: #da0001; margin-left: 0.2em; position: relative; top: -0.2em; } /* Help CKEditor blend into the H5PEditor */ .h5peditor .cke_bottom, .h5peditor .cke_top { background: #d0d0d1; } .h5peditor .cke_chrome { border: 1px solid #f5f5f5; background: #d0d0d1; } .h5peditor .cke_contents, .h5peditor .cke_toolgroup, .h5peditor .cke_combo_button { border: 1px solid #f5f5f5; } /* The show important description button */ .important-description-show { background: #f3d55a; padding: 0.2em 0.5em 0.2em 1.7em; margin-bottom: 0.5em; font-size: 0.9em; cursor: pointer; float: right; position: relative; line-height: normal; font-style: italic; font-weight: bold; &:before { font-family: $icon-font-family; font-style: normal; font-weight: normal; content: "\e909"; font-size: 1.8em; position: absolute; left: 0em; top: 0em; line-height: 0.85em; vertical-align: top; } } .important-description-clear-right { display: block; clear: right; } .h5peditor fieldset.common-fields-library-wrapper { width: 100%; padding: 0 1em 1em; box-sizing: border-box; height: 20px; border: solid 1px #e2e5ee; border-radius: 4px; margin-bottom: 1em; & > * { display: none; } & > legend { display: block; cursor: pointer; outline: none; color: #363b42; background-color: #fff; padding: 10px; font-weight: bold; font-size: 0.875em; &:before { font-family: "H5P"; content: "\e566"; margin-right: 0.5em; } &:focus:before { outline: 1px dotted #666; } } &.expanded { height: auto; & > * { display: block; } & > legend:before { content: "\e565"; } } } @import "metadata-form"; @import "metadata-popup"; @import "metadata-changelog-widget"; @import "metadata-author-widget"; @import "copy-paste"; @import "fullscreen-bar"; .h5peditor .h5peditor-language-switcher { float: right; white-space: nowrap; margin-bottom: 1em; .language-label { padding: 0 10px; font-size: 15px; } select { padding: 6px 30px 6px 8px; font-size: 15px; } } .h5peditor-language-notice { display: none; clear: both; font-size: 14px; background: #dcf6ff; color: #295b7a; padding: 10px 20px 10px 40px; margin: 1em 0; line-height: 1.5; position: relative; &:before { font-family: h5p; content: "\e90c"; position: absolute; left: 15px; font-size: 1.125em; } &.show { display: block; } .first { font-weight: bold; } a { text-decoration: underline; } }