scorm.css 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535
  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. body{
  9. background: #FFF !important;
  10. }
  11. .audio-scorm #container{
  12. min-height: 45px;
  13. margin-bottom: 5px;
  14. }
  15. #author_image {
  16. border: 1px solid #CCCCCC;
  17. float: left;
  18. margin: 0;
  19. padding: 8px;
  20. position: relative;
  21. width: 100%;
  22. }
  23. #author_name {
  24. float: left;
  25. text-align:center;
  26. width: 100%;
  27. font-size: 11px;
  28. color: #888;
  29. margin-top: 2px;
  30. }
  31. #learning_path_toc {
  32. font-size:9pt;
  33. margin:0;
  34. }
  35. #learning_path_left_zone #scorm-gamification{
  36. }
  37. #scorm-gamification .fa-star{
  38. font-size: 20px;
  39. color: #C2C2C2;
  40. }
  41. #scorm-gamification .fa-star.level{
  42. color: #D9534F;
  43. }
  44. #learning_path_left_zone .navegation-bar .buttons{
  45. padding-top: 5px;
  46. padding-bottom: 5px;
  47. }
  48. #learning_path_left_zone .description-autor{
  49. }
  50. .inner_lp_toc .scorm_item a {
  51. font-weight: bold;
  52. font-size: 14px;
  53. margin-right: 1px;
  54. padding-bottom: 2px;
  55. text-decoration: none;
  56. color: #2F3E46;
  57. }
  58. .inner_lp_toc .scorm_item a.chapter_module {
  59. font-weight: normal;
  60. margin-right: 10px;
  61. }
  62. .inner_lp_toc .scorm_item_highlight {
  63. border: 1px solid #999;
  64. background:#999;
  65. font-weight:bold;
  66. text-shadow:0 -1px 1px #666;
  67. background-image:-webkit-gradient(linear,left top,left bottom,from(#666),to(#999));
  68. background-image:-webkit-linear-gradient(top,#666,#999);
  69. background-image:-moz-linear-gradient(top,#666,#999);
  70. background-image:-ms-linear-gradient(top,#666,#999);
  71. background-image:-o-linear-gradient(top,#666,#999);
  72. background-image:linear-gradient(top,#666,#999);
  73. margin-right: 0px;
  74. padding: 10px 0px 10px 0px;
  75. text-decoration: none;
  76. }
  77. .inner_lp_toc .scorm_item_highlight a {
  78. color:#fff;
  79. margin-right: 1px;
  80. text-decoration: none;
  81. font-weight: bold;
  82. }
  83. .inner_lp_toc .scorm_item_section {
  84. background:#E8ECEF;
  85. color:#666;
  86. padding: 5px 0px 5px 0px;
  87. font-size: 12px;
  88. font-weight: bold;
  89. }
  90. .inner_lp_toc .scorm_item {
  91. font-size: 16px;
  92. margin-left: 10px;
  93. margin-right:10px;
  94. text-decoration: none;
  95. border-color: rgba(255, 255, 255, 0.3);
  96. }
  97. .inner_lp_toc .scorm_item_section .scorm_item:before {
  98. content : url('../../main/img/lp_section.png'); /* path from main/lp/lp_controller.php file */
  99. vertical-align: text-top;
  100. margin-right : 5px;
  101. }
  102. /* learning path's classes for section and item for 5 levels of depth */
  103. .scorm_section_level_0 {
  104. padding : 0 0 0 0;
  105. }
  106. .scorm_section_level_1 {
  107. padding : 0 0.5em 0 2em;
  108. }
  109. .scorm_section_level_2 {
  110. padding : 0 0.5em 0 4em;
  111. }
  112. .scorm_section_level_3 {
  113. padding : 0 0.5em 0 6em;
  114. }
  115. .scorm_section_level_4 {
  116. padding : 0 0.5em 0 8em;
  117. }
  118. .scorm_section_level_5 {
  119. padding : 0 0.5em 0 10em;
  120. }
  121. .scorm_item_level_0 {
  122. padding : 0 0 0 0;
  123. }
  124. .scorm_item_level_1 {
  125. padding : 0 0.5em 0 1.5em;
  126. }
  127. .scorm_item_level_2 {
  128. padding : 0 0.5em 0 3em;
  129. }
  130. .scorm_item_level_3 {
  131. padding : 0 0.5em 0 4.5em;
  132. }
  133. .scorm_item_level_4 {
  134. padding : 0 0.5em 0 6em;
  135. }
  136. .scorm_item_level_5 {
  137. padding : 0 0.5em 0 7.5em;
  138. }
  139. #learning_path_breadcrumb_zone .breadcrumb{
  140. background-color: #2b3d53;
  141. border-radius: 0;
  142. -moz-border-radius: 0;
  143. -webkit-border-radius: 0;
  144. color: #ffffff;
  145. font-size: 12px;
  146. }
  147. #learning_path_breadcrumb_zone .breadcrumb a{
  148. color: #ffffff;
  149. text-decoration: none;
  150. }
  151. #learning_path_breadcrumb_zone .breadcrumb a:hover{
  152. color: #dddddd;
  153. }
  154. .total{
  155. width: 100%;
  156. }
  157. .view-options{
  158. padding-top: 3px;
  159. margin-right: 5px;
  160. }
  161. .panel-default .panel-heading .btn{
  162. top: -25px;
  163. }
  164. .panel-default .panel-heading .dropdown-menu{
  165. top: 30%;
  166. }
  167. #content-scorm .breadcrumb{
  168. padding: 5px;
  169. }
  170. .scorm-heading{
  171. font-size: 14px;
  172. padding-top: 5px;
  173. padding-bottom: 5px;
  174. }
  175. #control-bottom{
  176. position: fixed;
  177. bottom: 0;
  178. width: 100%;
  179. text-align: center;
  180. left: 0;
  181. }
  182. #control-bottom.well{
  183. margin-bottom: 0;
  184. }
  185. /*SCORM CSS BASE */
  186. #learning_path_left_zone .home{
  187. display: inline-block;
  188. width: 94%;
  189. margin-bottom: .5em;
  190. margin-top: .5em;
  191. font-size: 12px;
  192. }
  193. #lp_navigation_elem .buttons {
  194. }
  195. #learning_path_left_zone .scorm_title{
  196. font-size: 20px;
  197. color: #666;
  198. margin-bottom: .5em;
  199. margin-top: .5em;
  200. }
  201. /* for section */
  202. .scorm_item_section.scorm_completed{
  203. color: #ffffff;
  204. padding-right: 1.5em;
  205. background-color: #AAB3B8;
  206. }
  207. .scorm_item_section{
  208. background: #2b3d53; /* Old browsers */
  209. background: -moz-linear-gradient(top, #2b3d53 0%, #2c3d4d 100%); /* FF3.6+ */
  210. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2b3d53), color-stop(100%,#2c3d4d)); /* Chrome,Safari4+ */
  211. background: -webkit-linear-gradient(top, #2b3d53 0%,#2c3d4d 100%); /* Chrome10+,Safari5.1+ */
  212. background: -o-linear-gradient(top, #2b3d53 0%,#2c3d4d 100%); /* Opera 11.10+ */
  213. background: -ms-linear-gradient(top, #2b3d53 0%,#2c3d4d 100%); /* IE10+ */
  214. background: linear-gradient(to bottom, #2b3d53 0%,#2c3d4d 100%); /* W3C */
  215. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2b3d53', endColorstr='#2c3d4d',GradientType=0 ); /* IE6-9 */
  216. padding-top: 10px;
  217. padding-bottom: 10px;
  218. font-size: 14px;
  219. color: #ffffff;
  220. /* border-top-left-radius:5px;
  221. border-top-right-radius: 5px;*/
  222. }
  223. .scorm_item_section .scorm_section_level_0{
  224. padding-left: .5em;
  225. padding-right: .5em;
  226. }
  227. .scorm_item_section .scorm_section_level_1{
  228. padding-left: 1.5em;
  229. padding-right: .5em;
  230. }
  231. .scorm_item_section .scorm_section_level_2{
  232. padding-left: 2.5em;
  233. padding-right: .5em;
  234. }
  235. .scorm_item_section .scorm_section_level_3{
  236. padding-left: 3.5em;
  237. padding-right: .5em;
  238. }
  239. .scorm_item_normal .scorm_item_level_0{
  240. padding-left: 1.5em;
  241. }
  242. .scorm_item_normal{
  243. padding:5px;
  244. margin-left: 10px;
  245. }
  246. .scorm_item_normal a.items-list{
  247. color: #666666;
  248. }
  249. .scorm_item_normal a:hover{
  250. text-decoration: none;
  251. }
  252. .scorm_item_normal.scorm_completed {
  253. background:url("../../main/img/scorm/scorm_completed.png") no-repeat left center;
  254. }
  255. .scorm_item_normal.scorm_failed{
  256. background:url("../../main/img/scorm/scorm_failed.png") no-repeat left center;
  257. }
  258. .scorm_item_normal.scorm_not_attempted{
  259. background:url("../../main/img/scorm/scorm_not_attempted.png") no-repeat left center;
  260. }
  261. .scorm_item_normal.scorm_highlight{
  262. background:url("../../main/img/scorm/scorm_highlight.png") no-repeat left center !important;
  263. color: #009AB8;
  264. }
  265. .scorm_item_normal.scorm_highlight.scorm_completed{
  266. background:url("../../main/img/scorm/scorm_current.png") no-repeat left center !important;
  267. color: #009AB8;
  268. }
  269. .scorm_item_normal.scorm_highlight.scorm_failed{
  270. background:url("../../main/img/scorm/scorm_failed.png") no-repeat left center !important;
  271. color: #009AB8;
  272. }
  273. .scorm_item_normal.scorm_highlight a{
  274. color: #009AB8 !important;
  275. }
  276. /* END SCORM CSS BASE*/
  277. #scorm-info{
  278. padding: 10px;
  279. margin-bottom: 5px;
  280. border: 1px solid #ddd;
  281. border-radius: 5px;
  282. }
  283. #scorm-info .description-autor p {
  284. font-size: 12px;
  285. line-height: 20px;
  286. color: #666666;
  287. }
  288. #scorm-info hr {
  289. background-color: #DDD;
  290. width: 100%;
  291. }
  292. #scorm-info #progress_bar .progress{
  293. margin-bottom: 5px;
  294. }
  295. .image-avatar .media-left img,
  296. .image-avatar img{
  297. border: 1px solid #DDD;
  298. border-radius: 5px;
  299. }
  300. .image-avatar{
  301. padding-top: 10px;
  302. padding-bottom: 10px;
  303. }
  304. .scorm-title{
  305. color: #666;
  306. font-size: 16px;
  307. font-weight: 700;
  308. line-height: 1.5em;
  309. margin: 0 0 10px;
  310. overflow: hidden;
  311. text-overflow: ellipsis;
  312. white-space: nowrap;
  313. }
  314. #learning_path_right_zone .lp-view-tabs li a {
  315. padding: 5px 10px;
  316. }
  317. /* Extra small devices (mobiles, 767px and down) */
  318. #learning_path_main {
  319. height: 100%;
  320. margin: 0;
  321. overflow: hidden;
  322. }
  323. #learning_path_left_zone,
  324. #learning_path_right_zone {
  325. bottom: 0;
  326. box-sizing: content-box;
  327. left: 0;
  328. margin: 0;
  329. padding: 0;
  330. position: absolute;
  331. right: 0;
  332. top: 0;
  333. transition-property: left width;
  334. transition-duration: 0.5s;
  335. }
  336. #learning_path_left_zone .lp-view-zone-container,
  337. #learning_path_right_zone .lp-view-zone-container {
  338. bottom: 0;
  339. left: 0;
  340. padding: 5px;
  341. position: absolute;
  342. right: 0;
  343. top: 0;
  344. }
  345. #learning_path_toc {
  346. bottom: 5px;
  347. left: 5px;
  348. overflow: auto;
  349. position: absolute;
  350. right: 5px;
  351. top: 100%;
  352. transition-property: top;
  353. transition-duration: 0.1s;
  354. }
  355. #learning_path_right_zone {
  356. left: 100%;
  357. width: 100%;
  358. }
  359. #learning_path_right_zone .lp-view-tabs .tab-content {
  360. bottom: 5px;
  361. left: 5px;
  362. position: absolute;
  363. right: 5px;
  364. top: 65px;
  365. }
  366. #learning_path_right_zone .tab-pane{
  367. height: 100%;
  368. position: relative;
  369. }
  370. #learning_path_right_zone .tab-pane iframe {
  371. border: 0 none;
  372. height: 100%;
  373. width: 100%;
  374. }
  375. #learning_path_main.lp-view-collapsed #learning_path_left_zone {
  376. left: -100%;
  377. }
  378. #learning_path_main.lp-view-collapsed #learning_path_right_zone {
  379. left: 0;
  380. width: 100%;
  381. }
  382. .nav-tabs li.active a{
  383. color: #006A84;
  384. }
  385. .nav-tabs li a{
  386. color: #666666;
  387. }
  388. #lp-view-expand-button{
  389. border: none;
  390. background: none;
  391. padding: 0;
  392. margin: 0;
  393. }
  394. .movil-toolbar{
  395. width: 100%;
  396. height: 40px;
  397. padding-top: 5px;
  398. }
  399. .btn-movil{
  400. list-style: none;
  401. margin: 0;
  402. padding: 0;
  403. }
  404. .btn-movil li{
  405. display: block;
  406. float: left;
  407. margin-left: 5px;
  408. margin-right: 5px;
  409. }
  410. .icon-toolbar .fa{
  411. width: 35px;
  412. height: 35px;
  413. line-height: 35px;
  414. text-align: center;
  415. border-radius: 100%;
  416. background-color: #34495E;
  417. font-size: 20px;
  418. color: #FFF;
  419. }
  420. .icon-toolbar .fa:hover{
  421. background-color: #000;
  422. }
  423. .expand .fa{
  424. background-color: #00829C;
  425. }
  426. .expand .fa:hover{
  427. background-color: #006A84;
  428. color: #ffffff;
  429. }
  430. .expand .fa:active, .expand .fa:focus{
  431. color: #ffffff;
  432. }
  433. #learning_path_toc {
  434. bottom: 10px;
  435. left: 10px;
  436. right: 5px;
  437. margin-top:20px;
  438. border: 1px solid #ddd;
  439. padding: 10px;
  440. border-radius: 5px;
  441. }
  442. /* Small devices (tablets, 768px and up) */
  443. @media (min-width: 768px) {
  444. #scorm-info{
  445. padding: 10px;
  446. margin-bottom: 10px;
  447. }
  448. #learning_path_left_zone {
  449. width: 250px;
  450. }
  451. #learning_path_right_zone {
  452. left: 250px;
  453. width: calc(100% - 250px);
  454. }
  455. #learning_path_main.lp-view-include-breadcrumb #learning_path_left_zone,
  456. #learning_path_main.lp-view-include-breadcrumb #learning_path_right_zone {
  457. top: 40px;
  458. }
  459. #learning_path_left_zone .lp-view-zone-container,
  460. #learning_path_right_zone .lp-view-zone-container {
  461. padding: 10px;
  462. }
  463. #learning_path_left_zone .lp-view-zone-container {
  464. padding-right: 5px;
  465. }
  466. #learning_path_right_zone .lp-view-zone-container {
  467. padding-left: 5px;
  468. }
  469. #learning_path_right_zone .lp-view-tabs .tab-content {
  470. bottom: 10px;
  471. right: 10px;
  472. top: 75px;
  473. }
  474. #learning_path_right_zone .tab-pane{
  475. }
  476. #learning_path_right_zone .tab-pane iframe {
  477. }
  478. }
  479. /* Medium devices (desktops, 992px and up) */
  480. @media (min-width: 992px) {
  481. #learning_path_left_zone {
  482. width: 300px;
  483. }
  484. #learning_path_right_zone {
  485. left: 300px;
  486. width: calc(100% - 300px);
  487. }
  488. }
  489. /* Large devices (large desktops, 1200px and up) */
  490. @media (min-width: 1200px) {
  491. #learning_path_left_zone {
  492. width: 350px;
  493. }
  494. #learning_path_right_zone {
  495. left: 350px;
  496. width: calc(100% - 350px);
  497. }
  498. }
  499. /* Landscape phones and down */
  500. @media (max-width: 480px) {
  501. #home-course{
  502. display: none !important;
  503. }
  504. .scorm-title{
  505. font-size: 14px;
  506. }
  507. .movil-toolbar{
  508. padding-left: 35%;
  509. }
  510. }