scorm.css 8.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395
  1. /*
  2. File used to display Learning Path item in student view
  3. If scorm.css file exists in theme folder, scorm.css file is used instead of this one
  4. See https://support.chamilo.org/issues/6976
  5. */
  6. /* LP SCORM */
  7. /* Default LP left column values */
  8. #learning_path_left_zone {
  9. float:left;
  10. height:100%;
  11. padding-left: 8px;
  12. padding-right: 4px;
  13. }
  14. #learning_path_left_zone #header {
  15. font-size:14px;
  16. }
  17. #scorm-info.panel-default{
  18. margin: 0px;
  19. }
  20. #author_image {
  21. border: 1px solid #CCCCCC;
  22. float: left;
  23. margin: 0;
  24. padding: 8px;
  25. position: relative;
  26. width: 100%;
  27. }
  28. #author_name {
  29. float: left;
  30. text-align:center;
  31. width: 100%;
  32. font-size: 11px;
  33. color: #888;
  34. margin-top: 2px;
  35. }
  36. #lp_media_file {
  37. float: left;
  38. text-align:center;
  39. width: 94%;
  40. }
  41. #learning_path_toc {
  42. font-size:9pt;
  43. margin:0;
  44. }
  45. #learning_path_left_zone .image-avatar{
  46. text-align: center;
  47. padding: 10px;
  48. border:1px solid #dddddd;
  49. border-radius: 4px;
  50. -webkit-border-radius: 4px;
  51. -moz-border-radius: 4px;
  52. margin-bottom: 10px;
  53. margin-top: 5px;
  54. }
  55. #learning_path_left_zone .navegation-bar .buttons{
  56. text-align: center;
  57. padding-top: 5px;
  58. padding-bottom: 5px;
  59. margin-bottom: 5px;
  60. }
  61. #learning_path_left_zone .description-autor{
  62. color: #666666;
  63. font-size: 12px;
  64. text-align: left;
  65. line-height: 20px;
  66. }
  67. .inner_lp_toc {
  68. overflow: auto;
  69. }
  70. .inner_lp_toc .scorm_item a {
  71. font-weight: bold;
  72. font-size: 14px;
  73. margin-right: 1px;
  74. padding-bottom: 2px;
  75. text-decoration: none;
  76. color: #2F3E46;
  77. }
  78. .inner_lp_toc .scorm_item a.chapter_module {
  79. font-weight: normal;
  80. margin-right: 10px;
  81. }
  82. .inner_lp_toc .scorm_item_highlight {
  83. border: 1px solid #999;
  84. background:#999;
  85. font-weight:bold;
  86. text-shadow:0 -1px 1px #666;
  87. background-image:-webkit-gradient(linear,left top,left bottom,from(#666),to(#999));
  88. background-image:-webkit-linear-gradient(top,#666,#999);
  89. background-image:-moz-linear-gradient(top,#666,#999);
  90. background-image:-ms-linear-gradient(top,#666,#999);
  91. background-image:-o-linear-gradient(top,#666,#999);
  92. background-image:linear-gradient(top,#666,#999);
  93. margin-right: 0px;
  94. padding: 10px 0px 10px 0px;
  95. text-decoration: none;
  96. }
  97. .inner_lp_toc .scorm_item_highlight a {
  98. color:#fff;
  99. margin-right: 1px;
  100. text-decoration: none;
  101. font-weight: bold;
  102. }
  103. .inner_lp_toc .scorm_item_section {
  104. background:#E8ECEF;
  105. color:#666;
  106. padding: 5px 0px 5px 0px;
  107. font-size: 12px;
  108. font-weight: bold;
  109. }
  110. .inner_lp_toc .scorm_item {
  111. font-size: 16px;
  112. margin-left: 10px;
  113. margin-right:10px;
  114. text-decoration: none;
  115. border-color: rgba(255, 255, 255, 0.3);
  116. }
  117. .inner_lp_toc .scorm_item_section .scorm_item:before {
  118. content : url('../../main/img/lp_section.png'); /* path from main/newscorm/lp_controller.php file */
  119. vertical-align: text-top;
  120. margin-right : 5px;
  121. }
  122. /* learning path's classes for section and item for 5 levels of depth */
  123. .scorm_section_level_0 {
  124. padding : 0 0 0 0;
  125. }
  126. .scorm_section_level_1 {
  127. padding : 0 0.5em 0 2em;
  128. }
  129. .scorm_section_level_2 {
  130. padding : 0 0.5em 0 4em;
  131. }
  132. .scorm_section_level_3 {
  133. padding : 0 0.5em 0 6em;
  134. }
  135. .scorm_section_level_4 {
  136. padding : 0 0.5em 0 8em;
  137. }
  138. .scorm_section_level_5 {
  139. padding : 0 0.5em 0 10em;
  140. }
  141. .scorm_item_level_0 {
  142. padding : 0 0 0 0;
  143. }
  144. .scorm_item_level_1 {
  145. padding : 0 0.5em 0 1.5em;
  146. }
  147. .scorm_item_level_2 {
  148. padding : 0 0.5em 0 3em;
  149. }
  150. .scorm_item_level_3 {
  151. padding : 0 0.5em 0 4.5em;
  152. }
  153. .scorm_item_level_4 {
  154. padding : 0 0.5em 0 6em;
  155. }
  156. .scorm_item_level_5 {
  157. padding : 0 0.5em 0 7.5em;
  158. }
  159. #learning_path_right_zone{
  160. border-left: 1px solid #CCCCCC;
  161. padding-left: 10px;
  162. box-sizing: border-box;
  163. }
  164. #learning_path_breadcrumb_zone .breadcrumb{
  165. background: #2b3d53; /* Old browsers */
  166. background: -moz-linear-gradient(top, #2b3d53 0%, #2c3d4d 100%); /* FF3.6+ */
  167. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2b3d53), color-stop(100%,#2c3d4d)); /* Chrome,Safari4+ */
  168. background: -webkit-linear-gradient(top, #2b3d53 0%,#2c3d4d 100%); /* Chrome10+,Safari5.1+ */
  169. background: -o-linear-gradient(top, #2b3d53 0%,#2c3d4d 100%); /* Opera 11.10+ */
  170. background: -ms-linear-gradient(top, #2b3d53 0%,#2c3d4d 100%); /* IE10+ */
  171. background: linear-gradient(to bottom, #2b3d53 0%,#2c3d4d 100%); /* W3C */
  172. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2b3d53', endColorstr='#2c3d4d',GradientType=0 ); /* IE6-9 */
  173. border-radius: 0;
  174. -moz-border-radius: 0;
  175. -webkit-border-radius: 0;
  176. color: #ffffff;
  177. font-size: 12px;
  178. }
  179. #learning_path_breadcrumb_zone .breadcrumb a{
  180. color: #ffffff;
  181. text-decoration: none;
  182. }
  183. #learning_path_breadcrumb_zone .breadcrumb a:hover{
  184. color: #dddddd;
  185. }
  186. #view_as_link{
  187. margin-top: 5px;
  188. margin-right: 10px;
  189. }
  190. #learning_path_left_zone #accordion .panel-heading{
  191. text-align: center;
  192. }
  193. #learning_path_left_zone #ui-option{
  194. width: 100%;
  195. display: block;
  196. text-align: center;
  197. cursor: pointer;
  198. }
  199. #learning_path_left_zone #ui-option #icon-up,
  200. #learning_path_left_zone #ui-option #icon-down{
  201. width: 100%;
  202. display: block;
  203. }
  204. .hidden{
  205. visibility: hidden;
  206. display: none;
  207. }
  208. .sidebar-scorm,
  209. .content-scorm{
  210. position: relative;
  211. min-height: 1px;
  212. padding-left: 15px;
  213. padding-right: 15px;
  214. }
  215. .sidebar-scorm,
  216. .content-scorm{
  217. float: left;
  218. }
  219. .total{
  220. width: 100%;
  221. }
  222. .panel-default .panel-heading .btn{
  223. top: -25px;
  224. }
  225. .panel-default .panel-heading .dropdown-menu{
  226. top: 30%;
  227. }
  228. #touch-button{
  229. text-decoration: none;
  230. position: fixed;
  231. top: 40px;
  232. left: -5px;
  233. overflow: hidden;
  234. width: 51px;
  235. height: 51px;
  236. border: none;
  237. opacity: 50;
  238. z-index: 2;
  239. font-size: 26px;
  240. }
  241. .inner_lp_toc{
  242. overflow-y:scroll;
  243. }
  244. .scorm-heading{
  245. font-size: 14px;
  246. padding-top: 5px;
  247. padding-bottom: 5px;
  248. }
  249. #control-bottom{
  250. position: fixed;
  251. bottom: 0;
  252. width: 100%;
  253. text-align: center;
  254. left: 0;
  255. }
  256. #control-bottom.well{
  257. margin-bottom: 0;
  258. }
  259. /*SCORM CSS BASE */
  260. #learning_path_left_zone .home{
  261. display: inline-block;
  262. width: 94%;
  263. margin-bottom: .5em;
  264. margin-top: .5em;
  265. font-size: 12px;
  266. }
  267. #lp_navigation_elem .buttons {
  268. margin-bottom: .5em;
  269. text-align: center;
  270. }
  271. #learning_path_left_zone .scorm_title{
  272. font-size: 20px;
  273. color: #666;
  274. margin-bottom: .5em;
  275. margin-top: .5em;
  276. }
  277. /* for section */
  278. .scorm_item_section.scorm_completed{
  279. color: #ffffff;
  280. padding-right: 1.5em;
  281. background-color: #AAB3B8;
  282. }
  283. .scorm_item_section{
  284. background: #2b3d53; /* Old browsers */
  285. background: -moz-linear-gradient(top, #2b3d53 0%, #2c3d4d 100%); /* FF3.6+ */
  286. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2b3d53), color-stop(100%,#2c3d4d)); /* Chrome,Safari4+ */
  287. background: -webkit-linear-gradient(top, #2b3d53 0%,#2c3d4d 100%); /* Chrome10+,Safari5.1+ */
  288. background: -o-linear-gradient(top, #2b3d53 0%,#2c3d4d 100%); /* Opera 11.10+ */
  289. background: -ms-linear-gradient(top, #2b3d53 0%,#2c3d4d 100%); /* IE10+ */
  290. background: linear-gradient(to bottom, #2b3d53 0%,#2c3d4d 100%); /* W3C */
  291. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2b3d53', endColorstr='#2c3d4d',GradientType=0 ); /* IE6-9 */
  292. padding-top: 10px;
  293. padding-bottom: 10px;
  294. font-size: 14px;
  295. color: #ffffff;
  296. /* border-top-left-radius:5px;
  297. border-top-right-radius: 5px;*/
  298. }
  299. .scorm_item_section .scorm_section_level_0{
  300. padding-left: .5em;
  301. padding-right: .5em;
  302. }
  303. .scorm_item_section .scorm_section_level_1{
  304. padding-left: 1.5em;
  305. padding-right: .5em;
  306. }
  307. .scorm_item_section .scorm_section_level_2{
  308. padding-left: 2.5em;
  309. padding-right: .5em;
  310. }
  311. .scorm_item_section .scorm_section_level_3{
  312. padding-left: 3.5em;
  313. padding-right: .5em;
  314. }
  315. .scorm_item_normal .scorm_item_level_0{
  316. padding-left: 1.5em;
  317. }
  318. .scorm_item_normal{
  319. padding:5px;
  320. margin-left: 10px;
  321. }
  322. .scorm_item_normal a.items-list{
  323. color: #666666;
  324. }
  325. .scorm_item_normal a:hover{
  326. text-decoration: none;
  327. }
  328. #scorm-info .panel-heading{
  329. padding: 5px;
  330. }
  331. #scorm-info #progress_bar .progress{
  332. margin-bottom: 5px;
  333. }
  334. .scorm-body .scorm-title{
  335. font-size: 18px;
  336. margin-top: 5px;
  337. margin-bottom: 5px;
  338. color: #666;
  339. }
  340. .scorm-body .scorm-title .fa-book{
  341. color: #00829C;
  342. }
  343. .scorm_item_normal.scorm_completed {
  344. background:url("../../main/img/scorm/scorm_completed.png") no-repeat left center;
  345. }
  346. .scorm_item_normal.scorm_failed{
  347. background:url("../../main/img/scorm/scorm_failed.png") no-repeat left center;
  348. }
  349. .scorm_item_normal.scorm_not_attempted{
  350. background:url("../../main/img/scorm/scorm_not_attempted.png") no-repeat left center;
  351. }
  352. .scorm_item_normal.scorm_highlight{
  353. background:url("../../main/img/scorm/scorm_highlight.png") no-repeat left center !important;
  354. color: #009AB8;
  355. }
  356. .scorm_item_normal.scorm_highlight.scorm_completed{
  357. background:url("../../main/img/scorm/scorm_current.png") no-repeat left center !important;
  358. color: #009AB8;
  359. }
  360. .scorm_item_normal.scorm_highlight a{
  361. color: #009AB8 !important;
  362. }
  363. /* END SCORM CSS BASE*/