@ -6,43 +6,50 @@ See https://support.chamilo.org/issues/6976
/* LP SCORM */
/* Default LP left column values */
. audio-scorm # container {
. audio-scorm # container {
min-height : 45px ;
margin-bottom : 5px ;
}
# author_image {
border : 1px solid # CCCCCC ;
float : left ;
margin : 0 ;
padding : 8px ;
position : relative ;
width : 100 % ;
border : 1px solid # CCCCCC ;
float : left ;
margin : 0 ;
padding : 8px ;
position : relative ;
width : 100 % ;
}
# author_name {
float : left ;
text-align : center ;
width : 100 % ;
font-size : 11px ;
color : # 888 ;
margin-top : 2px ;
float : left ;
text-align : center ;
width : 100 % ;
font-size : 11px ;
color : # 888 ;
margin-top : 2px ;
}
# learning_path_left_zone # scorm-gamification {
# learning_path_left_zone # scorm-gamification {
}
# scorm-gamification . fa-star {
# scorm-gamification . fa-star {
font-size : 20px ;
color : # C2C2C2 ;
}
# scorm-gamification . fa-star . level {
# scorm-gamification . fa-star . level {
color : # D9534F ;
}
# learning_path_left_zone . navegation-bar . buttons {
padding-top : 5px ;
padding-bottom : 5px ;
# learning_path_left_zone . navegation-bar . buttons {
padding-top : 5px ;
padding-bottom : 5px ;
}
# learning_path_left_zone . description-autor {
text-align : left ;
padding-top : 10px ;
# learning_path_left_zone . description-autor {
text-align : left ;
}
. inner_lp_toc . scorm_item a {
font-weight : bold ;
font-size : 14px ;
@ -51,79 +58,95 @@ See https://support.chamilo.org/issues/6976
text-decoration : none ;
color : # 2F3E46 ;
}
. inner_lp_toc . scorm_item a . chapter_module {
font-weight : normal ;
margin-right : 10px ;
}
. inner_lp_toc . scorm_item_highlight {
border : 1px solid # 999 ;
background : # 999 ;
font-weight : bold ;
text-shadow : 0 -1px 1px # 666 ;
background-image : -webkit-gradient ( linear , left top , left bottom , from ( # 666 ) , to ( # 999 ) ) ;
background-image : -webkit-linear-gradient ( top , # 666 , # 999 ) ;
background-image : -moz-linear-gradient ( top , # 666 , # 999 ) ;
background-image : -ms-linear-gradient ( top , # 666 , # 999 ) ;
background-image : -o-linear-gradient ( top , # 666 , # 999 ) ;
background-image : linear-gradient ( top , # 666 , # 999 ) ;
background : # 999 ;
font-weight : bold ;
text-shadow : 0 -1px 1px # 666 ;
background-image : -webkit-gradient ( linear , left top , left bottom , from ( # 666 ) , to ( # 999 ) ) ;
background-image : -webkit-linear-gradient ( top , # 666 , # 999 ) ;
background-image : -moz-linear-gradient ( top , # 666 , # 999 ) ;
background-image : -ms-linear-gradient ( top , # 666 , # 999 ) ;
background-image : -o-linear-gradient ( top , # 666 , # 999 ) ;
background-image : linear-gradient ( top , # 666 , # 999 ) ;
margin-right : 0px ;
padding : 10px 0px 10px 0px ;
text-decoration : none ;
}
. inner_lp_toc . scorm_item_highlight a {
color : # fff ;
color : # fff ;
margin-right : 1px ;
text-decoration : none ;
font-weight : bold ;
}
. inner_lp_toc . scorm_item {
font-size : 16px ;
margin-left : 10px ;
margin-right : 10px ;
margin-right : 10px ;
text-decoration : none ;
border-color : rgba ( 255 , 255 , 255 , 0 . 3 ) ;
}
. inner_lp_toc . scorm_item_section . scorm_item : before {
content : url ( '../../main /img/lp_section.png' ) ; /* path from main/lp/lp_controller.php file */
content : url ( '../../public /img/lp_section.png' ) ; /* path from main/lp/lp_controller.php file */
vertical-align : text-top ;
margin-right : 5px ;
margin-right : 5px ;
}
/* learning path's classes for section and item for 5 levels of depth */
. scorm_section_level_0 {
margin : 0 0 0 0 ;
}
. scorm_section_level_1 {
margin : 0 0 . 5em 0 20px ;
}
. scorm_section_level_2 {
margin : 0 0 . 5em 0 40px ;
}
. scorm_section_level_3 {
margin : 0 0 . 5em 0 60px ;
}
. scorm_section_level_4 {
margin : 0 0 . 5em 0 70px ;
}
. scorm_section_level_5 {
margin : 0 0 . 5em 0 10em ;
}
. scorm_item_normal {
. scorm_item_normal {
line-height : 25px ;
border-bottom : 1px solid # DDD ;
padding : 5 px 0 ;
padding : 10 px 0 ;
}
. level_0 {
margin : 0 ;
padding-left : 30px ;
}
. level_1 {
margin : 0 0 . 5em 0 20px ;
padding-left : 30px ;
}
. level_2 {
margin : 0 0 . 5em 0 40px ;
padding-left : 30px ;
}
. level_3 {
margin : 0 0 . 5em 0 60px ;
padding-left : 30px ;
@ -132,177 +155,216 @@ See https://support.chamilo.org/issues/6976
padding-right : 5px ;
line-height : 14px ;
}
. level_4 {
margin : 0 0 . 5em 0 70px ;
padding-left : 30px ;
}
. level_5 {
margin : 0 0 . 5em 0 90px ;
padding-left : 30px ;
}
# learning_path_breadcrumb_zone . breadcrumb {
background-color : # 2b3d53 ;
border-radius : 0 ;
-moz-border-radius : 0 ;
-webkit-border-radius : 0 ;
color : # ffffff ;
font-size : 12px ;
# learning_path_breadcrumb_zone . breadcrumb {
background-color : # 2b3d53 ;
border-radius : 0 ;
-moz-border-radius : 0 ;
-webkit-border-radius : 0 ;
color : # ffffff ;
font-size : 12px ;
}
# learning_path_breadcrumb_zone . breadcrumb a {
color : # ffffff ;
text-decoration : none ;
# learning_path_breadcrumb_zone . breadcrumb a {
color : # ffffff ;
text-decoration : none ;
}
# learning_path_breadcrumb_zone . breadcrumb a : hover {
color : # dddddd ;
# learning_path_breadcrumb_zone . breadcrumb a : hover {
color : # dddddd ;
}
. total {
width : 100 % ;
. total {
width : 100 % ;
}
. view-options {
. view-options {
padding-top : 3px ;
margin-right : 5px ;
}
. panel-default . panel-heading . btn {
top : -25px ;
. panel-default . panel-heading . btn {
top : -25px ;
}
. panel-default . panel-heading . dropdown-menu {
top : 30 % ;
. panel-default . panel-heading . dropdown-menu {
top : 30 % ;
}
# content-scorm . breadcrumb {
padding : 5px ;
# content-scorm . breadcrumb {
padding : 5px ;
}
. scorm-heading {
font-size : 14px ;
padding-top : 5px ;
padding-bottom : 5px ;
. scorm-heading {
font-size : 14px ;
padding-top : 5px ;
padding-bottom : 5px ;
}
# control-bottom {
position : fixed ;
bottom : 0 ;
width : 100 % ;
text-align : center ;
left : 0 ;
# control-bottom {
position : fixed ;
bottom : 0 ;
width : 100 % ;
text-align : center ;
left : 0 ;
}
# control-bottom . well {
margin-bottom : 0 ;
# control-bottom . well {
margin-bottom : 0 ;
}
/*SCORM CSS BASE */
# learning_path_left_zone . home {
display : inline-block ;
width : 94 % ;
margin-bottom : . 5em ;
margin-top : . 5em ;
font-size : 12px ;
}
# learning_path_left_zone . scorm_title {
font-size : 20px ;
color : # 666 ;
margin-bottom : . 5em ;
margin-top : . 5em ;
# learning_path_left_zone . home {
display : inline-block ;
width : 94 % ;
margin-bottom : . 5em ;
margin-top : . 5em ;
font-size : 12px ;
}
/* for section */
. scorm_item_section {
. scorm_item_section {
border-bottom : 1px solid # DDD ;
font-size : 12 px ;
font-size : 14px ;
font-weight : bold ;
}
. scorm_item_section . section {
background : url ( "../../main/img/scorm/folder-item-closed.png" ) no-repeat 10px center ;
. scorm_item_section . section {
background : url ( "../../public/img/scorm/folder-item-closed.png" ) no-repeat 10px center ;
padding : 10px 20px 10px 35px ;
}
. scorm_item_section . scorm_completed . section {
background : url ( "../../main/img/scorm/folder-item-open.png" ) no-repeat 10px center ;
padding-right : 1 . 5em ;
. scorm_item_section . scorm_completed . section {
background : url ( "../../public/img/scorm/folder-item-open.png" ) no-repeat 10px center ;
padding-right : 1 . 5em ;
}
. scorm_item_normal a . items-list {
color : # 666666 ;
font-size : 12px ;
. scorm_item_normal a . items-list {
color : # 666666 ;
display : inline-block ;
width : 100 % ;
}
. scorm_item_normal a : hover {
text-decoration : none ;
. scorm_item_normal a : hover {
text-decoration : none ;
}
. scorm_item_normal . scorm_completed {
background-color : # F5F5F5 ;
. scorm_item_normal . scorm_completed {
background-color : # F5F5F5 ;
}
. scorm_item_section . scorm_completed {
background-color : # F5F5F5 ;
color : # 000 ;
. scorm_item_section . scorm_completed {
background-color : # F5F5F5 ;
color : # 000 ;
}
. scorm_completed . item {
background : url ( "../../main /img/scorm/scorm_completed.png") no-repeat 10px center ;
background : url ( "../../public /img/scorm/scorm_completed.png" ) no-repeat 10px center ;
}
. scorm_completed . item a {
color : # 000 ;
. scorm_completed . item a {
color : # 000 ;
}
. scorm_failed . item {
background : url ( "../../main/img/scorm/scorm_failed.png" ) no-repeat 10px center ;
. scorm_failed . item {
background : url ( "../../public/img/scorm/scorm_failed.png" ) no-repeat 10px center ;
}
. scorm_not_attempted . item {
background : url ( "../../main/img/scorm/scorm_not_attempted.png" ) no-repeat 10px center ;
. scorm_not_attempted . item {
background : url ( "../../public/img/scorm/scorm_not_attempted.png" ) no-repeat 10px center ;
}
. scorm_highlight . item {
background : url ( "../../main/img/scorm/scorm_highlight.png" ) no-repeat 10px center ! important ;
color : # 009AB8 ;
. scorm_highlight . item {
background : url ( "../../public/img/scorm/scorm_highlight.png" ) no-repeat 10px center ! important ;
color : # 009AB8 ;
}
. scorm_highlight . scorm_completed . item {
background : url ( "../../main/img/scorm/scorm_current.png" ) no-repeat 10px center ! important ;
. scorm_highlight . scorm_completed . item {
background : url ( "../../public/img/scorm/scorm_current.png" ) no-repeat 10px center ! important ;
}
. scorm_highlight . scorm_failed . item {
background : url ( "../../main/img/scorm/scorm_failed.png" ) no-repeat 10px center ! important ;
. scorm_highlight . scorm_failed . item {
background : url ( "../../public/img/scorm/scorm_failed.png" ) no-repeat 10px center ! important ;
}
. scorm_highlight a {
color : # FFFFFF ! important ;
. scorm_highlight a {
/* color: #FFFFFF !important;*/
}
. scorm_item_normal . scorm_highlight {
. scorm_item_normal . scorm_highlight {
background-color : # 00829C ;
}
. scorm_item_normal . scorm_highlight a {
/* color: #FFFFFF; once again this make links invisible!! */
}
/* END SCORM CSS BASE*/
# scorm-info {
padding : 10px ;
margin-bottom : 5px ;
border : 1px solid # ddd ;
border-radius : 5px ;
# scorm-info {
padding : 0 ;
background-color : # EBF3F5 ;
}
# scorm-info . description-autor p {
font-size : 12px ;
line-height : 20px ;
color : # 666666 ;
}
# scorm-info hr {
background-color : # DDD ;
width : 100 % ;
border-top : 1px solid # d7d7d7 ;
margin-top : 5px ;
margin-bottom : 10px ;
}
# scorm-info # progress_bar . progress {
# scorm-info # progress_bar . progress {
margin-bottom : 5px ;
}
. image-avatar . media-left img ,
. image-avatar img {
. image-avatar img {
border : 1px solid # DDD ;
border-radius : 5px ;
}
. image-avatar {
. image-avatar {
padding-top : 10px ;
padding-bottom : 10px ;
}
. scorm-title {
color : # 333 ;
. scorm-title {
padding : 10px ;
}
. scorm-title h4 {
font-size : 18px ;
font-weight : bold ;
line-height : 1 . 5em ;
margin : 0 0 15px ;
overflow : hidden ;
text-overflow : ellipsis ;
white-space : nowrap ;
padding-bottom : 5px ;
border-bottom : 1px solid # DDD ;
color : # 686f7a ;
}
# learning_path_right_zone . lp-view-tabs li a {
padding : 5px 10px ;
}
# learning_path_main {
height : 100 % ;
margin : 0 ;
overflow : hidden ;
position : absolute ;
width : 100 % ;
}
# learning_path_left_zone ,
# learning_path_right_zone {
bottom : 0 ;
@ -313,32 +375,45 @@ See https://support.chamilo.org/issues/6976
position : absolute ;
right : 0 ;
top : 0 ;
transition-property : left width ;
transition-property : left , width ;
transition-duration : 0 . 5s ;
}
# learning_path_right_zone # wrapper-iframe {
height : 100 % ;
width : 100 % ;
}
# learning_path_left_zone . lp-view-zone-container ,
# learning_path_right_zone . lp-view-zone-container {
bottom : 0 ;
left : 0 ;
padding : 5px ;
padding : 0 ;
position : absolute ;
right : 0 ;
top : 0 ;
}
# learning_path_toc {
bottom : 5px ;
left : 5px ;
bottom : 0 ;
left : 0 ;
overflow : auto ;
position : absolute ;
right : 5px ;
right : 0 ;
top : 100 % ;
transition-property : top ;
transition-duration : 0 . 1s ;
}
# learning_path_right_zone {
left : 100 % ;
width : 100 % ;
}
# learning_path_right_zone . no-right-col {
left : 0 ;
}
# learning_path_right_zone . lp-view-tabs . tab-content {
bottom : 5px ;
left : 5px ;
@ -346,35 +421,43 @@ See https://support.chamilo.org/issues/6976
right : 5px ;
top : 60px ;
}
# learning_path_right_zone . tab-pane {
# learning_path_right_zone . tab-pane {
height : 100 % ;
position : relative ;
}
# learning_path_right_zone . tab-pane iframe {
border : 0 none ;
height : 100 % ;
width : 100 % ;
}
# learning_path_main . lp-view-collapsed # learning_path_left_zone {
left : -100 % ;
}
# learning_path_main . lp-view-collapsed # learning_path_right_zone {
left : 0 ;
width : 100 % ;
}
. nav-tabs li . active a {
. nav-tabs li . active a {
color : # 006A84 ;
}
. nav-tabs li a {
. nav-tabs li a {
color : # 666666 ;
}
# lp-view-expand-button {
# lp-view-expand-button {
border : none ;
background : none ;
padding : 0 ;
margin : 0 ;
}
. icon-toolbar . fa {
. icon-toolbar . fa {
width : 35px ;
height : 35px ;
line-height : 35px ;
@ -384,36 +467,34 @@ See https://support.chamilo.org/issues/6976
font-size : 20px ;
color : # FFF ;
}
. icon-toolbar . fa : hover {
. icon-toolbar . fa : hover {
background-color : # 000 ;
}
. expand . fa {
. expand . fa {
background-color : # 00829C ;
}
. expand . fa : hover {
. expand . fa : hover {
background-color : # 006A84 ;
color : # ffffff ;
}
. expand . fa : active , . expand . fa : focus {
. expand . fa : active , . expand . fa : focus {
color : # ffffff ;
}
# learning_path_toc {
bottom : 10px ;
left : 10px ;
right : 5px ;
margin-top : 20px ;
border : 1px solid # ddd ;
padding : 10px ;
border-radius : 5px ;
}
# scorm-info . progress-bar {
# scorm-info . progress-bar {
line-height : 17px ;
}
. actions_lp {
. actions_lp {
display : inline-block ;
width : 100 % ;
text-align : center ;
}
. navegation-bar {
display : block ;
padding : 5px 10px 5px 5px ;
@ -422,41 +503,125 @@ See https://support.chamilo.org/issues/6976
position : absolute ;
z-index : 9999 ;
}
/* LP VIEW COLLAPSE */
. scorm-collapse . panel : hover {
box-shadow : 0 3px 1px 0 rgba ( 20 , 23 , 28 , . 1 ) ;
}
. scorm-collapse . panel-default . panel-heading {
background : url ( . . / . . / public / img / icons / svg / arrow-down . svg ) # FFF right center no-repeat ;
padding-top : 0 ;
padding-bottom : 0 ;
}
. scorm-collapse a . item-header {
padding-bottom : 4px ;
padding-top : 10px ;
}
. scorm-collapse . panel-default . panel-heading h4 {
font-size : 18px ;
font-weight : 600 ;
}
. scorm-collapse a {
color : # 686f7a ;
}
. scorm-collapse a . item-action ,
. scorm-collapse a . item-header {
width : 100 % ;
display : inline-block ;
}
. scorm-collapse . panel-body {
padding : 0 ;
}
. scorm-collapse . panel-body . list {
list-style : none ;
padding : 0 ;
margin : 0 ;
}
. scorm-collapse . panel-body . list li {
padding : 15px 30px 15px 20px ;
border-bottom : 1px solid # dddddd ;
margin-bottom : 0 ;
}
. scorm-collapse . panel-body . list li : last-child {
border-bottom : none ;
}
. scorm_item_normal . scorm_completed {
background : url ( . . / . . / public / img / icons / svg / check-completed . svg ) # F5F5F5 right center no-repeat ;
}
. scorm_item_normal . scorm_not_attempted {
background : url ( . . / . . / public / img / icons / svg / check-not-attempted . svg ) # FFFFFF right center no-repeat ;
}
. scorm_item_normal . scorm_highlight . scorm_not_attempted {
background : url ( . . / . . / public / img / icons / svg / check-not-attempted . svg ) # 00829C right center no-repeat ;
}
. scorm_item_normal . scorm_highlight . scorm_completed {
background : url ( . . / . . / public / img / icons / svg / check-highlight . svg ) # 00829C right center no-repeat ;
}
. sidebar-scorm {
border-right : 1px solid # e6e6e6 ;
}
. scorm-collapse-list {
padding : 0 ;
margin : 0 0 10px 0 ;
list-style : none ;
}
. scorm-collapse-list li {
margin-bottom : 0 ;
padding-bottom : 10px ;
padding-top : 10px ;
}
. scorm-collapse-list . sub-item {
padding-left : 20px ;
}
. scorm_item_normal . scorm_highlight a {
color : # FFFFFF ;
}
/* END LP VIEW COLLAPSE */
/* Small devices (tablets, 768px and up) */
@ media ( min-width : 768px ) {
# scorm-info {
padding : 10px ;
margin-bottom : 10px ;
}
# learning_path_left_zone {
width : 250px ;
}
# learning_path_right_zone {
left : 250px ;
width : calc ( 100 % - 250px ) ;
}
# learning_path_right_zone . no-right-col {
width : 100 % ;
}
# learning_path_main . lp-view-include-breadcrumb # learning_path_left_zone ,
# learning_path_main . lp-view-include-breadcrumb # learning_path_right_zone {
top : 0 ;
}
# learning_path_left_zone . lp-view-zone-container ,
# learning_path_right_zone . lp-view-zone-container {
padding : 10px ;
}
# learning_path_left_zone . lp-view-zone-container {
padding-right : 5px ;
}
# learning_path_right_zone . lp-view-zone-container {
padding-left : 5px ;
}
# learning_path_right_zone . lp-view-tabs . tab-content {
bottom : 10px ;
right : 10px ;
top : 60px ;
}
# learning_path_right_zone . tab-pane {
# learning_path_right_zone . tab-pane {
}
# learning_path_right_zone . tab-pane iframe {
}
}
@ -476,90 +641,112 @@ See https://support.chamilo.org/issues/6976
/* Large devices (large desktops, 1200px and up) */
@ media ( min-width : 1200px ) {
# learning_path_left_zone {
width : 3 50px;
width : 4 50px;
}
# learning_path_right_zone {
left : 350 px;
width : calc ( 100 % - 350 px) ;
left : 465 px;
width : calc ( 100 % - 465 px) ;
}
}
@ media ( min-width : 480 px ) and ( max-width : 767 px) {
# panel-scorm . image-avatar {
@ media ( min-width : 979 px) and ( max-width : 1024 px) {
# panel-scorm . image-avatar {
display : none ;
}
}
@ media ( min-width : 768px ) and ( max-width : 978px ) {
# panel-scorm . image-avatar {
display : none ;
}
}
@ media ( min-width : 480px ) and ( max-width : 767px ) {
# panel-scorm . image-avatar {
display : none ;
}
# scorm-info {
padding : 0 ;
margin : 0 ;
padding : 0 ;
margin : 0 ;
}
# learning_path_left_zone . lp-view-zone-container ,
# learning_path_right_zone . lp-view-zone-container {
# learning_path_right_zone . lp-view-zone-container {
padding : 0 ;
}
# scorm-info {
padding : 30px 0 0 0 ;
margin : 0 ;
padding : 30px 0 0 0 ;
margin : 0 ;
}
. nav-tabs-bar {
. nav-tabs-bar {
display : none ;
}
}
/* Landscape phones and down */
@ media ( max-width : 480px ) {
. scorm-title {
. scorm-title {
font-size : 14px ;
padding : 10px ;
}
. movil-toolbar {
. movil-toolbar {
width : 100 % ;
height : auto ;
}
. scorm_item_normal {
. scorm_item_normal {
padding : 10px 5px ;
}
. actions_lp . btn-group . btn-sm {
padding : 10px ;
}
. icon-toolbar . fa {
width : 35px ;
height : 35px ;
line-height : 35px ;
font-size : 22px ;
width : 35px ;
height : 35px ;
line-height : 35px ;
font-size : 22px ;
}
. btn-movil {
width : 130px ;
margin : auto ;
width : 130px ;
margin : auto ;
}
# scorm-info {
padding : 30px 0 0 0 ;
margin : 0 ;
}
# learning_path_toc {
left : 0 ;
right : 0 ;
padding : 0 ;
border-radius : 5px ;
padding : 30px 0 0 0 ;
margin : 0 ;
}
# learning_path_right_zone {
left : 100 % ;
width : auto ;
}
# panel-scorm . image-avatar {
# panel-scorm . image-avatar {
display : none ;
}
. navegation-bar {
display : block ;
padding : 2px ;
position : fixed ;
top : 0 ;
right : 15px ;
z-index : 999 ;
display : block ;
padding : 2px ;
position : fixed ;
top : 0 ;
right : 0 ;
z-index : 999 ;
width : 100 % ;
text-align : center ;
}
. nav-tabs-bar {
. nav-tabs-bar {
display : none ;
}
# learning_path_left_zone . lp-view-zone-container ,
# learning_path_right_zone . lp-view-zone-container {
# learning_path_right_zone . lp-view-zone-container {
padding : 0 ;
}
# scorm-info hr {
display : none ;
}
}