scorm.css 12 KB

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