// BASE CSS html, html a, body { -webkit-font-smoothing: antialiased; height: auto; } a { transition: all 0.3s ease-in-out; } body { background: $page-background; } h1, h2, h3, h4, h5, h6 { font-family: $font-secondary; letter-spacing: 0.5px; line-height: 1.2; a { font-family: $font-secondary; } small { font-weight: 300; color: lighten($default-dark, 5%); } } h5, h6{ font-size: .875rem; } p { font-family: $font-primary; line-height: 1.9; color: #666666; } .lead { font-size: 18px; } ul { margin-bottom: 0; } a { color: $default-link; &:hover, &:focus { text-decoration: none; color: darken($default-link, 20%); } &:focus { outline: none; } &.text-gray { &:hover, &:focus, &.active { color: $default-dark !important; } } } :focus { outline: none; } hr { border-top: 1px solid $border-color; } .main{ .container-fluid{ padding: 0 10px; @include large($breakpoint-xl){ width: 95%; } @include portrait($breakpoint-sm, $breakpoint-md){ width: 100%; } @include landscape($breakpoint-sm) { width: 100%; } } } /*** TABS ***/ .nav-tabs{ margin-bottom: 10px; } .tab-content{ margin-top: 1rem !important; &.card-body{ padding: 0.5rem; } } /****** BOOTSTRAP SELECT ******/ .custom-select::-ms-expand { display: none; } .custom-select{ /* for Firefox */ -moz-appearance: none; /* for Chrome */ -webkit-appearance: none; } .bootstrap-select{ .dropdown-toggle{ &:after{ display: none; } } } .select2-container--default{ .select2-selection--single { background-color: #fff; border: 1px solid $select-color; border-radius: 4px; height: 40px !important; line-height: 40px; .select2-selection__rendered{ line-height: 40px; } .select2-selection__arrow{ height: 40px; b{ border-color: #495057 transparent transparent transparent; border-width: 6px 5px 0 5px; left: 20%; } } } } // --------------------------------------------------------- // APP // --------------------------------------------------------- .app-header{ .nav-item{ .nav-link{ .img-avatar{ border: 2px solid $grey-600; } } } } .app-elevator{ border: none; background: transparent; z-index: 999998; transform: translateZ(0px); position: fixed; transition: opacity 250ms cubic-bezier(0.645, 0.045, 0.355, 1) 0s, top, bottom; opacity: 1; margin: 10px 20px; right: 0px; bottom: 50px; display: none; } // --------------------------------------------------------- // SECTION INTRODUCTION TOOLS // --------------------------------------------------------- .section-intro{ margin-bottom: 2rem; padding-bottom: 2rem; .toolbar{ text-align: right; } .help{ text-align: center; } } // --------------------------------------------------------- // TABLES // --------------------------------------------------------- .card-action{ .page-select{ width: 30%; @include large($breakpoint-xl){ width: 30%; } @include portrait($breakpoint-sm, $breakpoint-md){ width: 100%; } @include landscape($breakpoint-sm) { width: 100%; } } .page-number{ display: inline-block; text-align: center; width: 100%; @include large($breakpoint-xl){ display: inline-block; text-align: center; } @include portrait($breakpoint-sm, $breakpoint-md){ display: inline-block; text-align: center; } @include landscape($breakpoint-sm) { display: none; } } .page-nav{ text-align: right; @include large($breakpoint-xl){ text-align: right; } @include portrait($breakpoint-sm, $breakpoint-md){ text-align: center; } @include landscape($breakpoint-sm) { text-align: center; } } .page-action { text-align: left; @include large($breakpoint-xl){ text-align: left; } @include portrait($breakpoint-sm, $breakpoint-md){ text-align: center; } @include landscape($breakpoint-sm) { text-align: center; } } } .table-hover{ tbody{ tr:hover{ background-color: #f9f9f9; } } } .table{ .row_selected { background-color: $row-table-select; } th, td{ padding: 12px 8px; } .checkbox{ margin-top: -1px; margin-bottom: 0; padding: 0; width: 15px; position: relative; display: block; label{ cursor: pointer; padding-left: 0; color: rgba(0,0,0, 0.5); min-height: 20px; margin-bottom: 0; } input[type=checkbox] { opacity: 0; position: absolute; margin: 0; z-index: -1; width: 0; height: 0; overflow: hidden; left: 0; pointer-events: none; &:focus + .checkbox-material .check:after { opacity: 0.2; } &:checked { & + .checkbox-material .check { background: #2196F3; } & + .checkbox-material .check:before { color: #FFFFFF; box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px; animation: checkbox-on 0.3s forwards; } } } .checkbox-material { vertical-align: middle; position: relative; top: 3px; padding-right: 5px; &:before{ display: block; position: absolute; left: 0; content: ""; background-color: rgba(0, 0, 0, 0.84); height: 20px; width: 20px; border-radius: 100%; z-index: 1; opacity: 0; margin: 0; transform: scale3d(2.3, 2.3, 1); animation: rippleOn 500ms; } .check{ position: relative; display: inline-block; width: 20px; height: 20px; border: 1px solid rgba(0,0,0, .54); overflow: hidden; z-index: 1; border-radius: 3px; &:before{ position: absolute; content: ""; transform: rotate(45deg); display: block; margin-top: -3px; margin-left: 7px; width: 0; height: 0; background: red; box-shadow: 0 0 0 0, 0 0 0 0, 0 0 0 0, 0 0 0 0, 0 0 0 0, 0 0 0 0, 0 0 0 0 inset; animation: checkbox-off 0.3s forwards; } } } } .avatar-user{ position: relative; display: block; width: 100%; .is-admin{ position: absolute; right: 0; bottom: 0; } .is-active{ position: absolute; left: 10px; bottom: -10px; } .avatar{ border: 1px solid #cdcdcd; } } .cut-email{ width:150px; height:20px; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; display: inline-block; &:hover{ width: 100%; white-space: initial; overflow: visible; cursor: pointer; display: inline-block; } } .toolbar-table{ display: inline-block; width: 200px; @include large($breakpoint-xl){ width: 100%; } @include portrait($breakpoint-sm, $breakpoint-md){ width: 200px; } @include landscape($breakpoint-sm) { width: 200px; } img{ border: 1px solid #cdcdcd; background-color: #ffffff; padding: 4px; border-radius: 5px; &:hover{ background-color:#cdcdcd; } } .blackboard_hide{ display: none; } } .th-header{ a{ color: $grey-900; } } } // --------------------------------------------------------- // FULL CONTAINER // --------------------------------------------------------- .full-container { left: $offscreen-size; min-height: calc(100vh - #{$header-height}); position: absolute; right: 0; top: $header-height; transition: all 0.2s ease; @include between($breakpoint-md, $breakpoint-xl) { left: 0; padding-left: $collapsed-size; } @include to($breakpoint-md) { left: 0; } } // --------------------------------------------------------- // COLLAPSE STATE // --------------------------------------------------------- .is-collapsed { .page-container { padding-left: $collapsed-size; @include to($breakpoint-md) { padding-left: 0; } @include between($breakpoint-md, $breakpoint-xl) { padding-left: $offscreen-size; } } .full-container { left: $collapsed-size; @include to($breakpoint-md) { left: 0; } @include between($breakpoint-md, $breakpoint-xl) { left: $offscreen-size; padding-left: 0; } } } // --------------------------------------------------------- // @Text Align // --------------------------------------------------------- .ta-c { text-align: center !important; } .ta-l { text-align: left !important; } .ta-r { text-align: right !important; } // --------------------------------------------------------- // @Font Size // --------------------------------------------------------- .fsz-xs { font-size: 0.75rem !important; } .fsz-sm { font-size: 0.87rem !important; } .fsz-def { font-size: 1rem !important; } .fsz-md { font-size: 1.15rem !important; } .fsz-lg { font-size: 1.4rem !important; } .fsz-xl { font-size: 1.7rem !important; } // --------------------------------------------------------- // @Font Weight // --------------------------------------------------------- .fw-100 { font-weight: 100 !important; } .fw-200 { font-weight: 200 !important; } .fw-300 { font-weight: 300 !important; } .fw-400 { font-weight: 400 !important; } .fw-500 { font-weight: 500 !important; } .fw-600 { font-weight: 600 !important; } .fw-700 { font-weight: 700 !important; } .fw-800 { font-weight: 800 !important; } .fw-900 { font-weight: 900 !important; } // --------------------------------------------------------- // @Line Height // --------------------------------------------------------- .lh-0 { line-height: 0 !important; } .lh-1 { line-height: 1 !important; } .lh-3\/2 { line-height: 1.5 !important; } .box-header{ color: $grey-900; display: block; padding: 0; position: relative; .box-title{ font-weight: 500; color: #404852; margin-bottom: 22px; font-size: 14px; text-transform: capitalize; } } .carousel-item img{ max-width: 100%; height: auto; } //card cropper .card-cropper{ padding-top: 1em; padding-bottom: 1em; .cropCanvas{ padding-bottom: 1em; } } .card{ border: 1px solid $card-border-color; border-radius: 0.25rem; margin-bottom: 10px; box-shadow: 0 0.25rem 0.5rem rgba(0,0,0,.025); &.card-description{ border: none; box-shadow: none; } .card-header{ padding: .75rem 1.25rem; margin-bottom: 0; color: inherit; background-color: #f1f8ff; border-bottom: 1px solid #e5e9f2; .card-title{ margin-bottom: 0; font-weight: normal; color: #316dab; } } } /*** GRID CATALOG ***/ .list-course{ display: grid; grid-gap: 1rem; grid-row-gap: 16px; grid-template-columns: repeat(4, 1fr); @include portrait($breakpoint-sm, $breakpoint-md){ grid-template-columns: repeat(3, 1fr); } @include landscape($breakpoint-sm) { grid-template-columns: repeat(1, 1fr); } } .tool-view{ text-align: center; padding-top: 2rem; padding-bottom: 2rem; margin-top: 2rem; .controls{ padding-top: 1rem; padding-bottom: 1rem; } } /* CATEGORY CLASSIC */ .category-list{ display: grid; grid-gap: 1rem; grid-row-gap: 16px; grid-template-columns: repeat(4, 1fr); @include portrait($breakpoint-sm, $breakpoint-md){ grid-template-columns: repeat(2, 1fr); } @include landscape($breakpoint-sm) { grid-template-columns: repeat(1, 1fr); } .card-category{ border: 1px solid #dee2e6; border-bottom-width: 5px; display: grid; grid-template-columns: auto; grid-gap: 10px; align-items: center; cursor: pointer; position: relative; .card-body{ padding: 0; .image-container{ position: relative; width: 100%; height: 100%; color: #ffffff; overflow: hidden; margin: auto; .thumbnail{ &:before{ content: ""; background-color: #000; z-index: 1; position: absolute; width: 100%; height: 100%; top: 0; left: 0; opacity: .35; } } &:hover img{ transform: scale(1.2); } img{ position: absolute; top: -50%; left: 0; bottom: 25%; right: 0; transition: all 1s ease; width: 100%; height: auto; } .image-content{ position: relative; z-index: 1; text-align: center; .title{ font-size: 18px; } .courses{ font-size: 12px; } a{ color: $default-white; display: block; width: 100%; padding-top: 5%; padding-bottom: 5%; } } } @include portrait($breakpoint-sm, $breakpoint-md){ padding: 0; } .title{ font-size: 16px; a{ color: $grey-800; } } } } } /** GRID SESSION **/ .grid-session{ display: grid; grid-gap: 1rem; grid-row-gap: 16px; grid-template-columns: repeat(3, 1fr); @include portrait($breakpoint-sm, $breakpoint-md){ grid-template-columns: repeat(2, 1fr); } @include landscape($breakpoint-sm) { grid-template-columns: repeat(1, 1fr); } .item-session{ flex: auto; break-inside: avoid; display: inline-table; .card-session{ .card-body{ padding: 0; .card-inside{ padding: 0.8rem 0.8rem 0.8rem 0; } } .card-title{ font-size: 14px; } } .card-list{ margin-top: 0; } } } .tab-content{ border: none; margin-top: 2rem; .tab-pane{ padding: 0; } } /** LIST SETTINGS **/ .list-settings{ display: grid; grid-gap: 1rem; grid-row-gap: 16px; grid-template-columns: repeat(3, 1fr); @include large($breakpoint-xl){ grid-template-columns: repeat(4, 1fr); } @include portrait($breakpoint-sm, $breakpoint-md){ grid-template-columns: repeat(2, 1fr); } @include landscape($breakpoint-sm) { grid-template-columns: repeat(1, 1fr); } .item-setting{ display: -webkit-flex; display: flex; .card{ display: inline-block; width: 100%; .card-description{ color: $grey-700; } } .list-group{ .list-group-item{ padding: 0.45rem 0.75rem; } } } } /* COURSE PREVIEW */ .card-view{ .category { position: absolute; border-radius: 10px; background-color: #FFCC00; color: #000000; font-weight: bold; padding: 0.2rem 0.8rem; top: -0.8rem; left: 0.5rem; font-size: 12px; z-index: 1; } &.card-course-classic{ width: 425px; } &.card-course{ width: 328px; } margin: auto; .doc-preview{ .preview-lg{ width: 326px; height: 185px; background-color: $grey-500; } .preview-sm{ width: 160px; height: 90px; background-color: $grey-500; } .img-preview{ float: left; margin-right: .5rem; overflow: hidden; text-align: center; } } .card-body{ padding: 0; .name{ font-size: 12px; color: $grey-700; } .title{ color: $default-link; font-size: 16px; } .card-inside{ padding: 0.8rem 0.8rem 0.8rem 0; } } } /* COURSE CLASSIC */ .grid-course{ display: grid; grid-gap: 1rem; grid-row-gap: 16px; grid-template-columns: repeat(3, 1fr); @include large($breakpoint-xl){ grid-template-columns: repeat(3, 1fr); } @include portrait($breakpoint-sm, $breakpoint-md){ grid-template-columns: repeat(2, 1fr); } @include landscape($breakpoint-sm) { grid-template-columns: repeat(1, 1fr); } .card-course-classic{ border: 1px solid #dee2e6; display: grid; grid-template-columns: auto; grid-gap: 10px; align-items: center; &.card-special{ background-color: #f6fcff; } .category{ position: absolute; border-radius: 10px; background-color: $default-yellow; color: $default-black; font-weight: bold; padding: 0.2rem 0.8rem; top: -0.8rem; left: 0.5rem; font-size: 12px; } .card-body{ padding: 0; .card-inside{ padding: 0.8rem 0.8rem 0.8rem 0; } @include portrait($breakpoint-sm, $breakpoint-md){ padding: 0.8rem; } .title{ font-size: 16px; } } } } .checkbox_delete_picture{ padding-top: 1em; } /* COURSE GRID */ .card-session{ .category{ position: absolute; border-radius: 10px; background-color: $default-yellow; color: $default-black; font-weight: bold; padding: 0.2rem 0.8rem; top: -0.8rem; left: 0.5rem; font-size: 12px; } .card-body{ .card-date{ font-size: 12px; color: $grey-600; } .card-details{ font-size: 12px; color: $grey-600; } .card-list{ .list-group{ .list-group-item{ padding: 0.75rem; } } } } } .card-course{ transform: perspective(1px) translateZ(0); transition-property: box-shadow; transition-duration: 0.3s; box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.15); background-color: $default-white; &:hover, &:focus{ box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.20); } &.card-category{ .card-subtitle{ font-size: 12px; } } .card-image{ position: relative; .card-tools{ position: absolute; bottom: 0; left: 0; .btn-sm{ border-radius: 0; } } } .card-ranking{ font-size: 12px; } .category{ position: absolute; border-radius: 10px; background-color: $default-yellow; color: $default-black; font-weight: bold; padding: 0.2rem 0.8rem; top: -0.8rem; left: 0.5rem; font-size: 12px; } .card-body{ padding: 0.5rem 0.25rem; .card-title{ margin-bottom: 0.5rem; .title{ font-size: 16px; font-weight: bold; line-height: 22px; } } .card-author{ display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; .list-name{ font-size: 12px; color: $grey-700; cursor: pointer; } .name{ font-size: 12px; white-space: nowrap; color: $grey-700; display: inline-block; &:after{ content: ", "; } &:last-child{ &:after{ content: " "; } } } } } } /***** RANKING ****/ .rating-stars ul { list-style-type:none; padding:0; -moz-user-select:none; -webkit-user-select:none; li{ &.star{ display:inline-block; i{ &.fa{ font-size:1.25em; color:#c3c3c3; } } &:hover{ i{ &.fa{ color:#FFCC36; } } } &.selected{ i{ &.fa{ color:#FF912C; } } } } } } /******************* ACCORDION B4 *****************/ .accordion-b4 { .card { border: 0 none; box-shadow: none; } .card-header { padding: 0; background: #fff; border: none; } .card-title a { display: block; position: relative; font-size: 18px; margin-bottom: 15px; padding: 10px 5px; border: none; border-bottom: 1px solid #cdcdcd; transition: all 0.10s linear 0s; cursor: pointer; &.collapsed { color: #808080; } i { color: $menu-background; position: absolute; top: 15px; left: 20px; font-size: 20px; } &:before { content: ""; position: absolute; bottom: -15px; left: 36px; } &.collapsed { &:before { content: ""; position: absolute; bottom: -15px; left: 36px; border: 0 none; } &:hover { color: #6a6060; } } &:after { content: "\f106"; font-family: "Font Awesome 5 Free", serif; font-weight: 900; color: $menu-secondary; font-size: 20px; line-height: 20px; position: absolute; top: 14px; right: 10px; } &.collapsed:after { font-family: "Font Awesome 5 Free", serif; font-weight: 900; font-size: 20px; line-height: 20px; position: absolute; top: 18px; right: 10px; content: "\f107"; color: #808080; } } } /*** TOOLS START COURSE ***/ .start-course{ text-align: center; .image-course{ padding-top: 1rem; padding-bottom: 1rem; margin-bottom: 1rem; } .start-info{ padding-top: 1rem; margin-top: 1rem; } } .grid-start{ display: grid; grid-gap: 1rem; grid-row-gap: 16px; grid-template-columns: repeat(5, 1fr); @include large($breakpoint-xl){ grid-template-columns: repeat(5, 1fr); } @include portrait($breakpoint-sm, $breakpoint-md){ grid-template-columns: repeat(3, 1fr); } @include landscape($breakpoint-sm) { grid-template-columns: repeat(2, 1fr); } .items-tools{ display: flex; justify-content: center; align-items: center; .item{ display: inline-block; width: 100%; text-align: center; padding-top: 1rem; padding-bottom: 1rem; margin-top: 1rem; } } } /*** TOOLS COURSE ***/ .grid-tools{ display: grid; grid-gap: 1rem; grid-row-gap: 16px; grid-template-columns: repeat(6, 1fr); @include large($breakpoint-xl){ grid-template-columns: repeat(7, 1fr); } @include portrait($breakpoint-sm, $breakpoint-md){ grid-template-columns: repeat(3, 1fr); } @include landscape($breakpoint-sm) { grid-template-columns: repeat(2, 1fr); } .items-tools{ display: flex; justify-content: center; align-items: center; .tools{ width: 140px; height: 160px; display: block; float: left; text-align: center; cursor: pointer; position: relative; background-color: transparent; &.cursor-none{ cursor: inherit; } .big_icon{ position: absolute; width: 84px; height: 84px; top: 40%; margin-top: -50px; left: 44%; margin-left: -32px; text-align: center; border: 2px solid rgba(216, 216, 216, 0.37); box-shadow: 0 0.25rem 0.5rem rgba(0,0,0,.16); border-radius: 10px; &:hover{ box-shadow: 0 0.28rem 0.6rem rgba(0,0,0,.2); } img{ transition: transform .2s ease-in; padding-top: 10px; &:hover{ transform: scale(1.15); } } a{ display: block; overflow: hidden; } } .content{ position: absolute; bottom: 0; left: 0; width: 100%; z-index: 2; .name{ padding-top: 5px; padding-bottom: 5px; } } } } } /****** SOCIAL ******/ .profile { .profile-bg { position: absolute; top: 0; left: 0; height: 100px; width: 100%; text-align: left; overflow: hidden; &.profile-bg-blur { img { filter: blur(10px) brightness(.85); } } img { width: 100%; height: 100%; object-fit: cover; } } .btn-toolbar{ margin-left: 17px; a{ margin-right: 5px; } } } .user-panel{ position: relative; display: flex; -webkit-box-align: center; align-items: center; font-weight: 500; z-index: 3; &.user-panel-column{ flex-direction: column; text-align: center; .user-panel-image{ margin-right: 0; margin-bottom: 8px; } .user-panel-info{ line-height: 23px; p{ margin: 0; } small{ font-size: 14px; display: block; font-weight: 400; line-height: 14px; } } } } .groups-messages{ .date{ font-size: 12px; } } /****** CALENDAR ******/ .fc-day-grid-event{ border: none; padding: 6px 12px 6px 22px; font-weight: 500; color: #ffffff !important; cursor: pointer; border-radius: 4px; } /****** ACTIONS ******/ .actions { background: #ffffff; border: 1px solid #dddddd; padding: 10px; border-radius: 4px; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05); margin-bottom: 10px; .btn-export{ padding: 0; } img { padding: 3px; border: 1px solid #dcdcdc; border-radius: 5px; background: #ffffff; &:hover { background: #ededed; } } a { text-decoration: none; margin-right: 10px; &:hover { text-decoration: none; } } .form-group{ margin-bottom: 0; } .btn-toolbar { border: 1px solid #dcdcdc; border-radius: 5px; display: inline-block; padding-left: 5px; padding-right: 5px; margin: 0 0 0 5px; background: #ffffff; img { background: none; border: none; } &:hover { background: #ededed; } } .actions-pagination { float: right; margin-top: 2px; * { display: inline-block; float: none; margin: 0; padding: 0; } img { margin: 6px; padding: 0; } } } /****** EXERCISE ******/ .card-exercise{ margin-bottom: 20px; .list-exercise{ list-style: none; margin: 0; padding: 0; li{ display: inline-block; } } } .list-exercise{ .list-group{ .list-group-item{ .toolbar{ margin-top: 10px; a{ img{ border: 1px solid #cdcdcd; background-color: #ffffff; padding: 2px; border-radius: 4px; } } } .score-list{ padding: 0; margin: 0; list-style: none; font-size: 12px; } .description{ width:100%; } } } } .main-question{ margin-bottom: 20px; margin-top: 20px; .title{ margin-bottom: 10px; margin-top: 10px; padding-bottom: 5px; border-bottom: 1px solid #cdcdcd; } .description{ margin-bottom: 10px; } .options{ padding: 0.8em; label{ display: block; margin-bottom: 18px; font-weight: bold; &.radio, &.checkbox{ min-height: 18px; margin-left: 25px; } input[type="radio"]{ margin-left: -25px; &.checkradios{ border-radius: 50px; } } input[type="checkbox"]{ margin-left: -25px; &.checkradios{ border-radius: 5px; } } .checkradios { -webkit-appearance: none; -moz-appearance: none; appearance: none; display: inline-block; position: relative; background-color: #ffffff; color: #666; top: 10px; height: 30px; width: 30px; border: 1px solid #cdcdcd; cursor: pointer; margin-right: 7px; outline: none; &:checked::before { position: absolute; font: 13px/1 'Open Sans', sans-serif; left: 11px; top: 7px; content: '\02143'; transform: rotate(40deg); } &:hover { background-color: #f7f7f7; } &:checked { background-color: #f1f1f1; } } } p{ line-height: 1em; display: contents; } } //Matching Draggable answer .drag_question{ min-height: 4em; width: 100%; padding: 20px; position: relative; box-sizing: border-box; ._jsPlumb_endpoint { z-index: 50; } .window { border: 1px solid #dddddd; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; cursor: pointer; min-height: 65px; padding: 25px; margin-left: 5px; margin-right: 5px; &.window_left_question { padding: 10px 25px 10px 10px; text-align: right; background: #f2f9fe; /* Old browsers */ background: -moz-linear-gradient(top, #f2f9fe 0%, #d6f0fd 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f2f9fe), color-stop(100%, #d6f0fd)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #f2f9fe 0%, #d6f0fd 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #f2f9fe 0%, #d6f0fd 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #f2f9fe 0%, #d6f0fd 100%); /* IE10+ */ background: linear-gradient(to bottom, #f2f9fe 0%, #d6f0fd 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f2f9fe', endColorstr='#d6f0fd', GradientType=0); /* IE6-9 */ } &.window_right_question { padding: 10px 10px 10px 25px; background: #ffffff; /* Old browsers */ background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #e5e5e5)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #ffffff 0%, #e5e5e5 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #ffffff 0%, #e5e5e5 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #ffffff 0%, #e5e5e5 100%); /* IE10+ */ background: linear-gradient(to bottom, #ffffff 0%, #e5e5e5 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e5e5e5', GradientType=0); /* IE6-9 */ } } .indent{ padding-top: 10px; padding-bottom: 10px; font-size: 14px; } .round{ border-radius: 0.8em; color: #666666; display: inline-block; font-weight: bold; line-height: 1.6em; margin-right: 5px; text-align: center; width: 1.6em; } .number{ background: #ffffff; border: 1px solid #cdcdcd; } .letter{ background: #ffffff; border: 1px solid #cdcdcd; } .bootstrap-select:not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn){ width: 100px; } .hidden{ display: none; } } .fill-blank{ .form-control{ display: inline-block; margin-top: 10px; margin-bottom: 10px; } } } /*** PLUGINS ***/ /*** REPORTS ***/ .item-report { text-align: center; .item-report-number { font-size: 35px; font-weight: bold; color: #666666; } } .card-box{ .icon-big{ font-size: 2.5em; min-height: 64px; width: 65px; height: 65px; border-radius: 50%; text-align: center; vertical-align: middle; margin-left: 25px; i{ line-height: 66px; color: #fff; } } .icon-student { background: #f1c435; } .icon-studentboss { background: #4b73eb; } .icon-teachers { background: #50bbc1; } .icon-humanresources { background: #68ceeb; } .numbers{ text-align: left; h2 { font-size: 3.2em; margin: 0; padding: 0; color: #666666; } } } .easy-donut{ .easypiechart { position: relative; text-align: center; width: 120px; height: 120px; margin: 20px auto 10px auto; .percent { display: block; position: absolute; font-size: 26px; top: 38px; width: 120px; } } .easypiechart-link { padding-bottom: 5px; padding-top: 5px; display: inline-block; width: 100%; text-align: center; } } #easypiechart-blue { .percent { color: #30a5ff; } } #easypiechart-teal { .percent { color: #1ebfae; } } #easypiechart-orange { .percent { color: #ffb53e; } } #easypiechart-red{ .percent { color: #ef4040; } } /*** CROP-CROPPER IMAGE ***/ .card-cropper{ img{ width: 300px; } } /****** GALERY ******/ .gallery{ .img-gallery { height: 100%; width: 100%; position: absolute; left: 0; top: 0; border-radius: 5px; } .photo { display: block; padding-bottom: 100%; overflow: hidden; } .frame { background-color: #eeeeee; display: block; width: 100%; } .canvas-one { margin-bottom: 30px; } .canvas-two { margin-right: 30px; flex-shrink: 1; -webkit-flex-shrink: 1; -ms-flex-negative: 1; display: block; position: relative; } } /****** EXERCISE RESULTS ******/ .ribbon { display: inline-block; width: 100%; margin-bottom: 20px; border-radius: 5px; .rib { height: 40px; width: 180px; display: block; line-height: 1.3; left: -2px; top: 0; color: #cfcfcf; margin: 0; padding: 2px 10px; position: relative; background: #333; border-radius: 4px 0 0 0; h3 { color: white; font-size: 16px; float: left; line-height: 16px; padding-top: 5px; margin: 0; } } &.rib-error, &.ribbon-total-error { background: #ff3019; border-top: none; border-bottom: none; float: left; } &.rib-warning { background: orange; border-top: none; border-bottom: none; float: left; } &.rib-gray { background: #cccccc; border-top: 1px solid #bbbbbb; border-bottom: 1px solid #bbbbbb; float: left; } &.rib-success, &.ribbon-total-success { background: #86B404; border-top: none; border-bottom: none; float: left; } } /**** LP COLLAPSE CATEGORY ****/ .learnpath-item{ &:hover{ .lp-actions{ opacity: 1; } } } .progress{ border: 1px solid #d5d5d5; } .lp-accordion{ .learning-lessons{ margin-bottom: 2rem; } .card{ margin-bottom: 0; } .btn-link{ display: inline-block; width: 100%; padding: 0; text-align: left; font-weight: 500; } .float-actions{ position: absolute; right: 17px; top: 12px; } .list-group{ .list-group-item{ padding: 0.75rem 0; &:first-child{ border: none; } .title{ font-size: 14px; font-weight: normal; } .extra { padding-left: 26px; font-size: 12px; color: #868686; } .list-allowed{ margin-bottom: 5px; font-size: 12px; list-style: none; padding: 0; } .progress{ margin-bottom: 10px; } } } .lp-actions{ opacity: 0; margin-top: 10px; transition: opacity 1s; a{ img{ border: 1px solid #cdcdcd; background-color: #ffffff; padding: 2px; border-radius: 4px; &:hover{ background-color: #cdcdcd; } } } } } /***** PROMOTIONS *****/ .promotions { border-bottom: 1px solid #DDD; margin-top: 30px; .promo { background-color: #D1D1D1; text-align: center; text-transform: uppercase; vertical-align: middle; h4 { font-size: 18px; font-weight: bold; a { color: #666; } } } .courses { background-color: #FAFAFA; vertical-align: middle; border-right: 1px solid #DDD; } .title { font-size: 16px; background-color: #DFDFDF; } .cycles { background-color: #F3F3F3; text-align: center; vertical-align: middle; text-transform: uppercase; border-right: 1px solid #DDD; h4 { font-size: 14px; font-weight: bold; } a { color: #66666C; &:hover { color: initial; } } } } .career p { padding-left: 10px; } /****** WHOISONLINE ******/ #whoisonline { .items-user { text-align: center; padding: 15px; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; border: 1px solid #ECF0F1; margin-bottom: 20px; min-height: 250px; } .items-user-name { font-size: 12px; padding-top: 10px; line-height: 15px; } } /****** FORM REGISTER ******/ .terms-conditions { padding: 15px 10px; background-color: #DDD; margin-bottom: 10px; border-radius: 5px; border: 1px solid #ccc; } .help-registration { background-color: #ececec; box-shadow: none; } #registration { input[name='status'] { position: relative !important; margin-left: 0 !important; -webkit-appearance: none; -moz-appearance: none; -o-appearance: none; -ms-appearance: none; appearance: none; outline: none; cursor: pointer; } input.register-profile[value='5']:after { position: relative; top: 0; display: block; content: ' '; background: url('#{$svg-path}/coursestudent_na.svg'); width: 132px; height: 132px; border-radius: 0; -webkit-transition: color 1s, -webkit-box-shadow 1s; transition: box-shadow 1s, color 1s, -webkit-box-shadow 1s; border: 4px solid #FFFFFF; } input.register-profile[value='5']:checked:after { -webkit-box-shadow: 2px 2px 14px rgba(0, 0, 0, 0.4); box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2); background: url(#{$svg-path}/coursestudent.svg); border-color: #E4CE80; transition: all 250ms ease; will-change: transition; top: 5px; } input.register-profile[value='1']:after { position: relative; top: 0; display: block; content: ' '; background: url(#{$svg-path}/coursemanager_na.svg); width: 132px; height: 132px; border-radius: 0; -webkit-transition: color 1s, -webkit-box-shadow 1s; transition: box-shadow 1s, color 1s, -webkit-box-shadow 1s; border: 4px solid #FFFFFF; } input.register-profile[value='1']:checked:after { -webkit-box-shadow: 2px 2px 14px rgba(0, 0, 0, 0.4); box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2); background: url(#{$svg-path}/coursemanager.svg); border-color: #76CDE4; transition: all 250ms ease; will-change: transition; top: 5px; } .progress { width: 100%; margin-top: 5px; margin-bottom: 5px; height: 10px; } #status-group{ .radio { display: inline-block; position: relative; label{ p{ text-align: center; padding-top: 5px; padding-bottom: 5px; } } } } } #custom-icons{ .items-tools { padding: 10px; border: 1px solid #CCCCCC; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; min-height: 185px; margin-bottom: 20px; text-align: center; } .name-tools { font-size: 12px; padding-top: 10px; padding-bottom: 10px; } .page-header { margin: 20px 0 20px; border-bottom: 1px solid #CCCCCC; } } .help-course { background-color: #EEEEEE; color: #666; border: 1px dashed #B0B0B0; border-radius: 5px; padding: 1em; margin-bottom: 1em; text-align: center; } .my-progress{ .profile-user { padding: 10px; } .username { font-size: 20px; text-align: center; } .progress { margin-bottom: 0; } .star-progress{ .fa-star { color: #e4c200; } .fa-star.in { color: #c2c2c2; } } .list-course { padding: 0; margin: 0; li { display: block; padding-top: 5px; padding-bottom: 5px; a { color: #666; &.active { color: #00829C; } } } } .embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; } } } /****** BLOG ******/ .blog { padding: 0; .title-post { font-size: 30px; margin-bottom: 10px; letter-spacing: 0; margin-top: 5px; } .media{ .avatar { width: 70px; } } .comments-post { margin-top: 50px; margin-bottom: 20px; .title { padding-bottom: 20px; } .media { border-top: 1px solid #eaeaea; padding-bottom: 10px; padding-top: 10px; margin-bottom: 10px; overflow: visible; .media-body { overflow: visible; } } } .content-post { margin-top: 15px; margin-bottom: 15px; p { font-size: 15px; } } .info-post { display: block; border-bottom: #eaeaea 1px dotted; padding-bottom: 10px; span { margin-right: 20px; color: #888; } } .article-post { margin-bottom: 20px; margin-top: 10px; } article{ header{ padding-top: 0; } } } /****** SOCIAL MEDIA ******/ .share-social-media { background-color: #FFF; margin-bottom: 5px; padding: 10px 5px 5px 5px; font-size: 12px; .sharing-buttons { list-style: none; margin: 0 0 10px 0; padding: 0; li { display: inline-block; padding-right: 5px; padding-left: 5px; } } } .btn-facebook{ &.btn-inverse { color: #3B5998; background-color: transparent; border-color: rgba(59, 89, 152, 0.3); &:hover{ color: #FFF; background-color: #3B5998; border-color: #3B5998; } } } .btn-twitter{ &.btn-inverse { color: #00ACED; background-color: transparent; border-color: rgba(0, 172, 237, 0.3); &:hover { color: #FFF; background-color: #00ACED; border-color: #00ACED; } } } .btn-linkedin{ &.btn-inverse { color: #0077b5; background-color: transparent; border-color: rgba(7, 119, 181, 0.3); &:hover{ color: #FFF; background-color: #0077b5; border-color: #0077b5; } } } /****** GLOSSARY *****/ .glossary{ .title{ font-size: 1.65rem; text-align: center; } .item-glossary{ border-bottom: 1px solid #dddddd; h5{ margin-bottom: 0; font-weight: bold; color: #5b6be8; font-size: 1.15rem; } } } /****** FORUM CSS ******/ .forum{ .card{ margin-bottom: 0; .card-header{ padding: 0.25rem; .btn{ padding: 0; margin: 0; } .float-actions{ position: absolute; right: 17px; top: 10px; } } } .list-forum{ .card{ border: none; box-shadow: none; &:hover{ .toolbar{ opacity: 1; transition: opacity 1s; } } .toolbar{ opacity: 0; margin-left: 5px; img{ border: 1px solid #cdcdcd; background-color: #ffffff; padding: 2px; border-radius: 4px; } } } .d-flex{ border-bottom: 1px solid #dddddd; } .avatar{ img{ border: 1px solid #cdcdcd; } } .forum-threads{ font-size: 12px; list-style: none; margin: 0; padding: 0; color: #666666; li{ display: inline-block; padding-left: 5px; padding-right: 5px; } } } } /****** ABOUT COURSE AND SESSION ******/ .about{ .share-social-media { padding: 10px 0 0 0; .sharing-buttons { list-style: none; margin: 0 0 10px 0; padding: 0; li{ padding-left: 0; } } } .topics{ .title-info { margin: 30px 0 20px 0; border-bottom: 1px solid #ddd; padding-bottom: 15px; } } .course-tags{ width: 100%; margin-top: 10px; li{ span{ position: relative; display: inline-block; padding: 0 3px; height: 20px; line-height: 20px; font-weight: 600 !important; background: #D7E3E6 !important; border-radius: 0 3px 3px 0 !important; -webkit-transition: none 0.15s ease-in-out; -o-transition: none 0.15s ease-in-out; transition: none 0.15s ease-in-out; &:before{ display: inline-block; content: ""; top: 0; left: -8px; position: absolute; width: 0; height: 0; border-right: 8px solid #D7E3E6; border-bottom: 10px solid transparent; border-top: 10px solid transparent; } &:after{ z-index: 1; content: ""; top: 8px; left: -3px; position: absolute; width: 4px; height: 4px; background-color: #F2F2F2; border-radius: 10px; } } } } .course-short{ padding-top: 5px; padding-bottom: 5px; ul{ display: inline-block; width: 100%; list-style: none; padding: 0; margin: 0; li{ display: inline-block; &.author{ font-weight: bold; margin-right: 5px; } } } } .coach-information{ width: 100%; display: block; margin-bottom: 10px; padding-bottom: 10px; .coach-header{ display: flex; align-items: center; flex-flow: row; .coach-avatar{ width: 180px; margin-right: 20px; } .coach-title{ flex-flow: column; align-items: flex-start; display: flex; } } } } /****** Sequence ******/ #parents { text-align: center; .parent { display: inline-block; width: 125px; padding: 5px; &.parent-deleted{ .sequence-course { text-decoration: line-through; } } .big-icon { background-color: #ECF0F1; padding: 10px; text-align: center; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; position: relative; .sequence-course { font-size: 12px; } .sequence-id { border-radius: 50%; background-color: #E74C3C; width: 20%; color: #ffffff; position: absolute; right: 5px; top: 5px; } .sequence-deleted { font-size: 12px; } } } .sequence-plus-icon { color: #CCCCCC; padding: 0 10px; } } .border-sequence { background: url("#{$img-path}line.png") repeat-x 0 35px; } .arrow-sequence { height: 68px; background: url("#{$img-path}icons/48/sequence-arrow.png") no-repeat center 15px; margin-top: 10px; padding-top: 10px; } #resource { text-align: center; .parent { display: inline-block; padding: 5px; width: 15%; .big-icon { background-color: #eeffaa; padding: 10px; text-align: center; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; position: relative; .sequence-course { font-size: 12px; } .sequence-id { border-radius: 50%; background-color: #E74C3C; width: 20%; color: #ffffff; position: absolute; right: 5px; top: 5px; } .sequence-deleted { font-size: 12px; } } } } #children { text-align: center; .parent { display: inline-block; padding: 5px; width: 15%; .big-icon { background-color: #feffd6; padding: 10px; text-align: center; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; position: relative; .sequence-course { font-size: 12px; } .sequence-id { border-radius: 50%; background-color: #E74C3C; width: 20%; color: #ffffff; position: absolute; right: 5px; top: 5px; } .sequence-deleted { font-size: 12px; } } } } /****** OPEN BADGES ******/ .openbadges-introduction { line-height: 30px; margin-bottom: 30px; .title { text-align: center; margin-bottom: 20px; color: #456176; font-size: 35px; } .title { text-align: center; margin-bottom: 20px; color: #456176; font-size: 35px; } .sub-title { color: #456176; text-align: center; font-size: 20px; } .badges-tablet { padding-top: 15px; } .block-content { padding-top: 30px; padding-bottom: 30px; p { padding-left: 5%; font-size: 14px; } &.block-title{ background-color: #e2eceb; border: 1px solid #456176; padding: 5px 10px; font-size: 16px; color: #456176; } } .block-edit { padding-top: 15px; padding-bottom: 30px; &.block-title{ background-color: #e2eceb; border: 1px solid #456176; padding: 5px 10px; font-size: 16px; color: #456176; } } } .list-badges { padding: 0; margin: 0; list-style: none; .thumbnail { border-color: #bce8f1; display: inline-block; margin-right: 15px; padding: 0; vertical-align: top; width: 95px; a{ img{ margin-bottom: 4px; margin-top: 4px; } .caption{ background: #D9EDF7; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; &:hover{ width: auto; white-space: initial; overflow: visible; cursor: pointer; } } } } } /****** ISSUES ******/ #issues { width: 800px; height: 350px; overflow: hidden; li{ width: 800px; height: 350px; list-style: none; float: left; &.selected{ img{ transform: scale(1.1, 1.1); } } img{ float: left; margin: 10px 30px 10px 50px; background: transparent; -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)"; /* IE 8 */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF, endColorstr=#00FFFFFF); /* IE 6 & 7 */ zoom: 1; transition: all 2s ease-in-out; transform: scale(0.7, 0.7); } h1{ color: #ffcc00; font-size: 48px; margin: 20px 0; text-shadow: #000 1px 1px 2px; } p{ font-size: 16px; margin-right: 70px; font-weight: normal; line-height: 22px; } } #grad_left, #grad_right { width: 100px; height: 350px; position: absolute; top: 0; #next { position: absolute; font-size: 70px; top: 170px; width: 22px; height: 38px; text-indent: -9999px; overflow: hidden; right: 0; background: url('#{$img-path}timeline/next.png') no-repeat 0 0; &:hover{ background-position: 0 -76px; } } #prev { left: 0; position: absolute; font-size: 70px; top: 170px; width: 22px; height: 38px; text-indent: -9999px; overflow: hidden; background: url('#{$img-path}timeline/prev.png') no-repeat 0 0; &:hover{ background-position: 0 -76px; } } } } #my_timeline { width: 900px; height: 350px; overflow: hidden; margin: 20px auto; position: relative; background: url('#{$img-path}timeline/dot.gif') left 45px repeat-x; #dates { width: 800px; height: 60px; overflow: hidden; li { list-style: none; float: left; width: 120px; height: 50px; font-size: 16px; text-align: center; background: url('#{$img-path}timeline/biggerdot.png') center bottom no-repeat; } a { line-height: 38px; padding-bottom: 10px; color: #cecece; } .selected { font-size: 20px; color: #666666; } } } /****** QUESTION ******/ .question_options { .droppable { padding: 5px; text-align: center; background-color: #ECF0F1; border: dotted #dddddd 2px; border-radius: 4px; color: #666666; display: inline-block; width: 85%; margin-bottom: 0; } .droppable-item { background-color: #84bd00; color: #FFF; padding: 3px 0 3px 5px; .number{ font-size: 16px; font-weight: bold; display: inline-block; } } .droppable{ .gallery{ .exercise-draggable-answer-option{ margin-bottom: 0; background: #feffff; background: -moz-linear-gradient(top, #feffff 0%, #d2ebf9 100%); background: -webkit-linear-gradient(top, #feffff 0%, #d2ebf9 100%); background: linear-gradient(to bottom, #feffff 0%, #d2ebf9 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#feffff', endColorstr='#d2ebf9', GradientType=0); border: 1px solid #DDDDDD; padding: 5px; border-radius: 5px; font-size: 12px; cursor: pointer; } .btn-secondary{ background: #D9534F; color: #ffffff; border-color: #D43F3A; &:hover{ background: #C9302C; color: #ffffff; border-color: #AC2925; } } } } .fill_blanks { padding: 20px 30px; box-sizing: border-box; img { max-width: 100%; display: block; height: auto !important; } } .exercise-draggable-answer { float: left; margin-bottom: 20px; min-height: 2em; min-width: 100%; &.list-inline{ float: left; } li{ cursor: move; margin: 0 20px 20px 0; padding: 5px 20px; text-align: center; } .touch-items { background: #ffffff; background-image: -webkit-linear-gradient(top, #ffffff, #cfcfcf); background-image: -moz-linear-gradient(top, #ffffff, #cfcfcf); background-image: -ms-linear-gradient(top, #ffffff, #cfcfcf); background-image: -o-linear-gradient(top, #ffffff, #cfcfcf); background-image: linear-gradient(to bottom, #ffffff, #cfcfcf); border-radius: 4px; color: #2e2e2e; font-size: 13px; padding: 5px 10px; border: solid #b0b0b0 1px; text-decoration: none; z-index: 100; &:hover{ background: #ffffff; background-image: -webkit-linear-gradient(top, #ffffff, #b8d3e3); background-image: -moz-linear-gradient(top, #ffffff, #b8d3e3); background-image: -ms-linear-gradient(top, #ffffff, #b8d3e3); background-image: -o-linear-gradient(top, #ffffff, #b8d3e3); background-image: linear-gradient(to bottom, #ffffff, #b8d3e3); text-decoration: none; } } } } .card-quota { margin: 15px; font-weight: bold; color: #006633; text-align: center; } /****** LINKS ******/ .link-page{ .list-group-item{ .link-title{ display: inline-block; width: 100%; .toolbar{ float: right; opacity: 0; } } &:hover{ .link-title{ .toolbar{ opacity: 1; } } } } .link-accordion{ .card{ margin-bottom: 0; .card-header{ padding: .5rem; .title-card{ padding-top: 5px; display: inline-block; padding-left: 10px; } } } } } /****** SKILLS ******/ .skill-options{ .legend { border: 1px dashed #cccccc; padding: 1em; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; margin-bottom: 1em; margin-top: 1em; background-color: #FFFFFF; } .skill-home { margin-top: 1em; margin-bottom: 1em; } .btn-block { box-sizing: border-box; display: block; padding-left: 0; padding-right: 0; width: 100%; } .accordion-inner { padding: 9px 15px; background-color: #FFFFFF; } .skill-winner { list-style: none; margin: 0; padding: 0; li { float: left; margin-right: 1em; padding-bottom: 1em; a { background: url("#{$img-path}icons/16/winner.png") no-repeat; padding-left: 1.5em; padding-bottom: 1em; } } } } .search-skill ul.holder li.bit-input input { width: 100%; } .skill-legend-basic { color: #3A87AD; } .skill-legend-add { color: #F89406; } .skill-legend-search { color: #B94A48; } .skill-legend-badges { color: #31A354; } .skill_partition { cursor: pointer; stroke: #000000; stroke-width: 0.5px; } .skill_root { box-shadow: 2px 2px 19px #aaa; border-radius: 6px; background-color: #ccc; border: 0.1em dotted #D4E06B; color: black; font-size: 0.9em; height: 4em; opacity: 0.8; padding-top: 0.9em; text-align: center; width: 120px; z-index: 40; position: relative; } .skill_child { box-shadow: 2px 2px 19px #aaa; border-radius: 6px; background-color: white; border: 0.1em dotted #D4E06B; color: black; font-size: 0.9em; height: 4em; opacity: 0.8; padding-top: 0.9em; text-align: center; width: 120px; z-index: 40; float: left; margin-left: 20px; margin-bottom: 20px; margin-top: 10px; position: relative; } .skills_chart{ * { margin: 0; padding: 0; } ul { padding-top: 20px; position: relative; li { float: left; text-align: center; list-style-type: none; padding: 20px 5px 0 5px; position: relative; &:before, &:after{ content: ''; position: absolute; top: 0; right: 50%; border-top: 1px solid #f80; width: 50%; height: 20px; } &:after{ right: auto; left: 50%; border-left: 1px solid #f80; } } } } .skills_chart li:only-child::before, .skills_chart li:only-child::after { display: none; } .skills_chart li:only-child { padding-top: 0; } .skills_chart li:first-child::before, .skills_chart li:last-child::after { border: 0 none; } .skills_chart li:last-child::before { border-right: 1px solid #f80; border-radius: 0 5px 0 0; } .skills_chart li:first-child::after { border-radius: 5px 0 0 0; -webkit-border-radius: 5px 0 0 0; -moz-border-radius: 5px 0 0 0; } .skills_chart ul ul::before { content: ''; position: absolute; top: 0; left: 50%; border-left: 1px solid #f80; width: 0; height: 20px; } .skills_chart li a { border: 1px solid #f80; padding: 1em 0.75em; text-decoration: none; color: #333; background-color: rgba(255, 255, 255, 0.5); font-size: 0.85em; display: inline-block; border-radius: 5px; transition: all 500ms; } .skills_chart li a:hover { border: 1px solid #fff; color: #ddd; background-color: rgba(255, 128, 0, 0.7); display: inline-block; } .skills_chart > ul > li > a { font-size: 1em; font-weight: bold; } .skills_chart > ul > li > ul > li > a { width: 8em; } .survey-block { width: 100%; margin: auto; padding: 10px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } .start-survey { margin-top: 20px; padding-top: 20px; margin-bottom: 20px; } .survey-reports .list-group{ .list-group-item{ img { float: left; margin-right: 5px; } h4{ font-weight: bold; font-size: 14px; } } } .survey-block{ .title-survey-block { padding-top: 10px; padding-bottom: 10px; h3 { display: inline-block; margin-left: 10px; } } .table{ .center { text-align: center; } } } /****** LIST TEMPLATE DOCUMENT ******/ #frmModel{ display: block; height: 750px; ul { list-style: none; margin: 0; padding: 0 .5em 0 1em; li{ text-align: center; padding-top: 1em; padding-bottom: 1em; .title, .description{ padding-top: .5em; padding-bottom: .5em; width: auto; font-size: 12px; line-height: 16px; } &:hover{ background-color: #FAFAFA; border: 1px solid #F2F2F2; } } } } /****** SHORT NAVIGATION MENU ******/ #toolnavbox { position: fixed; margin: 0; padding: 0; top: 10px; left: 0; list-style: none; z-index: 9999; li{ width: 100%; a{ display: block; font-size: 12px; height: 35px; margin-left: -160px; .btn { text-align: right !important; } .icons{ width: 70px; } .icons-text { width: 200px; } .text { width: 180px; } } .tool-img { margin-left: 5px; } } } #toolnavbox-two { position: fixed; margin: 0; padding: 0; top: 10px; left: 0; list-style: none; z-index: 9999; li { width: 50px; a { display: block; margin-left: -2px; font-size: 12px; width: 50px; .btn { text-align: left !important; } } .tool-img { float: left; margin-right: 5px; } } } /****** COURSE TOOLBAR ******/ #toolshortcuts_horizontal { padding-top: 15px; padding-bottom: 15px; margin-bottom: 10px; text-align: center; .items-icon { padding: 0; display: inline-block; img { padding: 5px; border-radius: 5px; box-shadow: 0 1px 3px #C8C8C8; border: 1px solid #e6e6e6; } } } /****** SIMPLE INNER SCROLLBAR ******/ .scrollbar-inner > .scroll-element, .scrollbar-inner > .scroll-element div { border: none; margin: 0; padding: 0; position: absolute; z-index: 10; } .scrollbar-inner > .scroll-element div { display: block; height: 100%; left: 0; top: 0; width: 100%; } .scrollbar-inner > .scroll-element.scroll-x { bottom: 2px; height: 8px; left: 0; width: 100%; } .scrollbar-inner > .scroll-element.scroll-y { height: 100%; right: 2px; top: 0; width: 8px; } .scrollbar-inner > .scroll-element .scroll-element_outer { overflow: hidden; } .scrollbar-inner > .scroll-element .scroll-element_outer, .scrollbar-inner > .scroll-element .scroll-element_track, .scrollbar-inner > .scroll-element .scroll-bar { -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; } .scrollbar-inner > .scroll-element .scroll-element_track, .scrollbar-inner > .scroll-element .scroll-bar { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; filter: alpha(opacity=40); opacity: 0.4; } .scrollbar-inner > .scroll-element .scroll-element_track { background-color: #e0e0e0; } .scrollbar-inner > .scroll-element .scroll-bar { background-color: #c2c2c2; } .scrollbar-inner > .scroll-element:hover .scroll-bar { background-color: #919191; } .scrollbar-inner > .scroll-element.scroll-draggable .scroll-bar { background-color: #919191; } /* update scrollbar offset if both scrolls are visible */ .scrollbar-inner > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_track { left: -12px; } .scrollbar-inner > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_track { top: -12px; } .scrollbar-inner > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_size { left: -12px; } .scrollbar-inner > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_size { top: -12px; } /****** SCROLL WRAPPER ******/ .scroll-wrapper { overflow: hidden !important; padding: 0; position: relative; height: 300px; .scroll-content { border: none !important; box-sizing: content-box; height: auto; left: 0; margin: 0; max-height: none; max-width: none; overflow: scroll !important; padding: 0; position: relative !important; top: 0; width: auto; } .scroll-element{ div { box-sizing: content-box; } } } .scroll-wrapper > .scroll-content::-webkit-scrollbar { height: 0; width: 0; } .scroll-element.scroll-x.scroll-scrollx_visible, .scroll-element.scroll-y.scroll-scrolly_visible { display: block; } .scroll-element .scroll-bar, .scroll-element .scroll-arrow { cursor: default; } .scroll-textarea { border: 1px solid #cccccc; border-top-color: #999999; } .scroll-textarea > .scroll-content { overflow: hidden !important; } .scroll-textarea > .scroll-content > textarea { border: none !important; box-sizing: border-box; height: 100% !important; margin: 0; max-height: none !important; max-width: none !important; overflow: scroll !important; outline: none; padding: 2px; position: relative !important; top: 0; width: 100% !important; } .scroll-textarea > .scroll-content > textarea::-webkit-scrollbar { height: 0; width: 0; } /****************************/ .date-attendance { color: #666; text-align: center; font-size: 12px; width: 150px; margin: auto; .blue { color: #2E75A3; } .grey { color: #666; } } #student-list-work { background-color: #ffffff; position: absolute; top: 0; right: 10px; border: 1px solid #ccc; width: auto; z-index: 3; border-radius: 5px; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05); #student-list-work { background-color: #ffffff; position: absolute; top: 0; right: 10px; border: 1px solid #ccc; width: auto; z-index: 3; border-radius: 5px; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05); } #student-list-work .toolbar { text-align: center; padding-top: 5px; padding-bottom: 5px; } } /****** RATING STAR ******/ .star-rating { list-style: none; margin: 0; padding: 0; width: 125px; height: 25px; position: relative; overflow: hidden; background: url('#{$img-path}alt_star.png') top left repeat-x; li{ padding: 0; margin: 0; width: 25px; height: 25px; float: left; a{ display: block; width: 25px; height: 25px; line-height: 25px; text-decoration: none; text-indent: -9000px; z-index: 20; position: absolute; padding: 0; overflow: hidden; &:hover{ background: url('#{$img-path}alt_star.png') left bottom; z-index: 2; left: 0; border: none; } .one-star { left: 0; &:hover { width: 25px; } } .two-stars { left: 25px; &:hover { width: 50px; } } .three-stars { left: 50px; &:hover { width: 75px; } } .four-stars { left: 75px; &:hover { width: 100px; } } .five-stars { left: 100px; &:hover { width: 125px; } } } .current-rating { background: url('#{$img-path}alt_star.png') left center; position: absolute; height: 25px; display: block; text-indent: -9000px; z-index: 1; } } } .work_correction_file_upload{ margin-bottom: 5px; margin-top: 5px; .button-load { position: relative; font-size: 10px; font-weight: normal; width: 100%; background: url("#{$img-path}icons/64/file_upload.png") no-repeat center 20px; padding-top: 70px; } .file_upload_small { border: 1px solid #AFDDE9; background: #D4E6F0; width: 100%; border-radius: 5px; padding-bottom: 5px; } } table.certaintyTable { margin : auto; border: 1px solid #7FC5FF; th { text-align: center; border-bottom: 1px solid #7FC5FF; background-color: #c9e0ff; } td { padding : 10px; .borderRight { border-right: 1px dotted #7FC5FF; } .firstLine { vertical-align: top; text-align: center; } } th{ .globalChart { font-size : 18pt; line-height : 120%; padding : 20px; } } } /****** ******/ .count_down { font-size: 20px; font-weight: bold; color: #2E75A3; padding: 5px; text-align: center; margin-bottom: 10px; background: url(#{$img-path}clock-exercise.png) no-repeat center center #FFF; border: 1px solid #DDD; border-radius: 5px; } .time_warning_two { background: url(#{$img-path}clock-exercise.png) no-repeat center center #FFD700; border: 1px solid #FFCC00; color: #C00; } .time_warning_one { background: url(#{$img-path}clock-exercise.png) no-repeat center center #FB3A35; border: 1px solid #FB3A35; color: #FFF; } /****** ******/ .label_tag { padding: 1px 3px 2px; margin: 2px 3px 2px 0; background-color: #bfbfbf; font-size: 10px; font-weight: bold; color: #ffffff; border-radius: 3px; text-align: center; width: 155px; &.personal_event { background: #3366CC; } &.admin_event { background: red; } &.course_event { background: #458B00; } .group_event { background: #A0522D; } .session_event { background: #00496D; } .important { background-color: #c43c35; } .warning { background-color: #f89406; } .success { background-color: #46a546; } .skill { background-color: #46a546; } .course { background-color: #62cffc; } } /****** THEMATIC ******/ #thematic{ .title-topics { font-size: 15px; color: #00829C; font-weight: bold; } .thematic-cont { padding: 15px; border: 1px solid #EEEEEE; border-radius: 5px; } .thematic-avatar { text-align: center; margin-bottom: 20px; } .img-fluid { display: inline-block; } .current { background-color: #EEEEEE; border: 1px dashed #B0B0B0; border-radius: 5px; } .toolbar-actions { height: 30px; display: block; } .arrow { background: url("#{$img-path}icons/22/arrow-up-collapse.png") no-repeat 99% center; &.collapsed{ background: url("#{$img-path}icons/22/arrow-down-collapse.png") no-repeat 99% center; } } .thematic-advance { margin-top: 10px; display: inline-block; } } /****** MEDIA PLAYER ******/ .preview{ .mejs__container { background: #aaa; } .mejs__controls { padding: 0 0 0 0; background: none; } .mejs__button{ button { margin: 16px 6px; } } } /****** OPEN BADGES ******/ .create-openbadges { text-align: center; margin-bottom: 10px; padding-top: 5px; padding-bottom: 5px; } .openbadges-img, .openbadges-view { text-align: center; padding: 10px; margin-top: 10px; border: 1px solid #b2b2b2; } /****** DROPZONE ******/ #dropzone { position: relative; overflow: hidden; direction: ltr; cursor: pointer; text-align: center; color: #333; font-weight: bold; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; width: auto; margin-left: auto; margin-right: auto; height: auto; line-height: 50px; background-color: #D4E6F0; border: 2px dashed #bbbbbb; font-size: 120%; margin-bottom: 0; &:hover{ background: lawngreen; } } /****** SOCIAL PROFILE ******/ .social-post{ .mediaPost { padding-top: 10px; padding-bottom: 5px; margin-bottom: 5px; } .sub-mediapost { padding-left: 20px; margin-left: 20px; .user-image{ vertical-align: top; .avatar-thumb{ border: 1px solid #dddddd; margin-bottom: 5px; margin-right: 5px; } img { width: 50px; height: 50px; max-width: 50px; max-height: 50px; } } } .top-mediapost{ .user-image{ vertical-align: top; .avatar-thumb{ border: 1px solid #dddddd; margin-bottom: 5px; margin-right: 5px; } img { width: 50px; height: 50px; max-width: 50px; max-height: 50px; } } } } /****** MESSAGE ******/ .message-topic { padding: 15px; border-radius: 5px; display: inline-block; border: 1px solid #ECF0F1; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05); width: 100%; } .message-post { border: 1px solid #ECF0F1; margin-bottom: 15px; border-radius: 5px; padding: 15px; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05); } .message-select-box { float: left; display: inline; position: absolute; margin-top: 23px; margin-left: 20px; } .message-view { float: right; background: #F5E38E; border: 2px solid #EBCA4F; padding: 10px; width: 100px; position: relative; margin-top: 115px; margin-right: -100px; } /****** VIDEO CHAT ******/ #chat-video-panel .thumbnail video { background: #FFF url("#{$img-path}icons/128/camera-webrtc.png") no-repeat center center; display: block; min-width: 100%; width: 100%; } #listFriends{ .list-group-item { border: none; padding: 0; font-size: 12px; } .help{ font-size: 12px; } a{ display: block; text-overflow: ellipsis; &.username{ display: inline-block; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; width: 120px; } } &:hover{ background: none; } } .webcamclip_bg { width: 340px; height: 260px; border: 10px solid #00677C; border-radius: 25px; } .wami-container { height: 144px; position: relative; } /****** MAIN QUESTION ******/ .exercise_overview_options { background-color: #F9F9F9; border-radius: 10px; padding: 15px 0 15px 0; .left_option { float: left; margin: 12px 5px; width: 33%; } .center_option { float: left; margin: 15px 5px; text-align: center; width: 33%; } .right_option { float: right; margin: 12px 5px; text-align: right; font-size: 14px; } } .ribbon{ .error { color: red; } .success { color: green; } .rib{ &:before { content: ''; display: block; width: 0; height: 0; position: absolute; bottom: -11px; z-index: -10; border: 5px solid; border-color: #242424 transparent transparent transparent; left: 0; } &:after{ right: 0; } } .rib-error{ &:before { border-color: #cf0404 transparent transparent transparent; } } .rib-success{ &:before { border-color: #4B610B transparent transparent transparent; } } .rib-gray{ &:before { border-color: #ccc transparent transparent transparent; } } .rib-warning{ &:before { border-color: darkorange transparent transparent transparent; } } } .form-separator { font-weight: bold; border-bottom: 2px solid #CCC; padding-bottom: 12px; color: #666; margin-bottom: 20px; margin-top: 20px; } .feedback-green { color: #33a10b; font-weight: bold; } .feedback-red { color: #ff3019; text-decoration: line-through; font-weight: bold; } .correct-answer { background-color: #D7E3E6; color: #000000; padding-left: 5px; padding-right: 5px; border-radius: 5px; } #toolshortcuts_horizontal { padding: 0 20px 2px 0; clear: right; margin-left: auto; margin-right: auto; text-align: right; width: 98%; } #toolshortcuts_vertical { padding: 0 0 2px 0; clear: right; margin-left: auto; margin-right: auto; text-align: right; width: 40px; } /* Only for Firefox */ @-moz-document url-prefix() { select#question_type_hidden option { padding: 10px 0px 10px 40px; background-repeat: no-repeat; } select#question_type_hidden option[value="1"] { background-image: url(#{$img-path}icons/32/mcua.png); } select#question_type_hidden option[value="2"] { background-image: url(#{$img-path}icons/32/mcma.png); } select#question_type_hidden option[value="3"] { background-image: url(#{$img-path}icons/32/fill_in_blanks.png); } select#question_type_hidden option[value="4"] { background-image: url(#{$img-path}icons/32/matching.png); } select#question_type_hidden option[value="5"] { background-image: url(#{$img-path}icons/32/open_answer.png); } select#question_type_hidden option[value="6"] { background-image: url(#{$img-path}icons/32/hotspot.png); } select#question_type_hidden option[value="7"] { background-image: url(#{$img-path}icons/32/mcma.png); } select#question_type_hidden option[value="8"] { background-image: url(#{$img-path}icons/32/mcma.png); } select#question_type_hidden option[value="9"] { background-image: url(#{$img-path}icons/32/mcmac.png); } select#question_type_hidden option[value="10"] { background-image: url(#{$img-path}icons/32/mcuao.png); } select#question_type_hidden option[value="11"] { background-image: url(#{$img-path}icons/32/mcmao.png); } select#question_type_hidden option[value="12"] { background-image: url(#{$img-path}icons/32/mcmaco.png); } select#question_type_hidden option[value="13"] { background-image: url(#{$img-path}icons/32/audio_question.png); } select#question_type_hidden option[value="14"] { background-image: url(#{$img-path}icons/32/mcmagl.png); } select#question_type_hidden option[value="16"] { background-image: url(#{$img-path}icons/32/calculated_answer.png); } } /****** EXERCISE MATFDC ******/ .certaint-score { height : 20px; margin-bottom: 10px; padding : 0; text-align: center; font-size: 22px; font-weight: bold; } .chart-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); grid-gap: 30px; width: 100%; margin: 0 auto; } .chart-title{ text-align: center; font-weight: bold; font-size: 16px; margin-bottom: 20px; padding-bottom: 10px; border-bottom: 1px solid #b3b3b3; text-transform: uppercase; background: #ecf0f1; padding-top: 10px; } .certaint-list-two, .certaint-list{ margin: 0; padding: 0; list-style: none; text-align: center; position: absolute; bottom: 0; display: inline-block; width: 100%; } .certaint-list-two li{ display: inline-block; margin-right: 10px; width: 40%; } .certaint-list li{ width: 50%; margin: auto; } .certaint-list-two li:last-child{ margin-right: 0; } .certaint-text{ text-align: center; padding: 10px 5px; } .certaintyVerticalLine { float: left; border-left : 1px solid black; font-size: 0; } .certaintyQuizClearer { clear : both; font-size: 0; height:0 } .chart-legend{ list-style: none; margin: 0; padding: 0; text-align: center; } .chart-legend li{ display: inline-block; padding-left: 10px; padding-right: 10px; margin-right: 10px; margin-bottom: 10px; } .square_color4{ color: #1e9c55; } .square_color3{ color: #b1e183; } .square_color2{ color: #f6ba2a; } .square_color1{ color: #f79b88; } .square_color0{ color: #ed4040; } .levelbar_1 { background-color: #1e9c55; border: 1px solid #1e9c55; } .levelbar_2 { background-color: #b1e183; border: 1px solid #b1e183; } .levelbar_3 { background-color: #f6ba2a; border: 1px solid #f6ba2a; } .levelbar_4 { background-color: #f79b88; border: 1px solid #f79b88; } .levelbar_5 { background-color: #ed4040; border: 1px solid #ed4040; } .forum_low_description { color: #737780; font-style: italic; font-weight: normal; } .forum_attach_comment { color: #737780; font-style: italic; font-weight: normal; } .forum_message_left { width: 150px; vertical-align: top; border-right: 1px solid #aaa; background-color: #F7F7F7; } .forum_message_left_2_be_approved { width: 150px; vertical-align: top; border-right: 1px solid #aaa; background-color: #F7F7F7; color: #999; } .forum_message_post_title { font-weight: bold; background-color: #F7F7F7; height: 20px; font-size: 20px; } .forum_message_post_title_2_be_approved { color: #999; font-weight: bold; background-color: #F7F7F7; height: 20px; } .forum_message_post_text { margin-bottom: 10px; vertical-align: top; background: white; } .forum_message_post_text_2_be_approved { color: #999; margin-bottom: 10px; vertical-align: top; } // Convert classic 1.11.x styles into a v2 format. .data_table { @extend .table; @extend .table-bordered; @extend .table-striped; } .pull-right { @extend .float-right; } .btn-default { @extend .btn-secondary; } .img-responsive { @extend .img-fluid; }