scorm.css 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829
  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. .audio-scorm #container {
  9. min-height: 45px;
  10. margin-bottom: 5px;
  11. }
  12. #author_image {
  13. border: 1px solid #CCCCCC;
  14. float: left;
  15. margin: 0;
  16. padding: 8px;
  17. position: relative;
  18. width: 100%;
  19. }
  20. #author_name {
  21. float: left;
  22. text-align: center;
  23. width: 100%;
  24. font-size: 11px;
  25. color: #888;
  26. margin-top: 2px;
  27. }
  28. #learning_path_left_zone #scorm-gamification {
  29. }
  30. #scorm-gamification .fa-star {
  31. font-size: 20px;
  32. color: #C2C2C2;
  33. }
  34. #scorm-gamification .fa-star.level {
  35. color: #D9534F;
  36. }
  37. #learning_path_left_zone .navegation-bar .buttons {
  38. padding-top: 5px;
  39. padding-bottom: 5px;
  40. }
  41. #learning_path_left_zone .description-autor {
  42. text-align: left;
  43. }
  44. .inner_lp_toc .scorm_item a {
  45. font-weight: bold;
  46. font-size: 14px;
  47. margin-right: 1px;
  48. padding-bottom: 2px;
  49. text-decoration: none;
  50. color: #2F3E46;
  51. }
  52. .inner_lp_toc .scorm_item a.chapter_module {
  53. font-weight: normal;
  54. margin-right: 10px;
  55. }
  56. .inner_lp_toc .scorm_item_highlight {
  57. border: 1px solid #999;
  58. background: #999;
  59. font-weight: bold;
  60. text-shadow: 0 -1px 1px #666;
  61. background-image: -webkit-gradient(linear, left top, left bottom, from(#666), to(#999));
  62. background-image: -webkit-linear-gradient(top, #666, #999);
  63. background-image: -moz-linear-gradient(top, #666, #999);
  64. background-image: -ms-linear-gradient(top, #666, #999);
  65. background-image: -o-linear-gradient(top, #666, #999);
  66. background-image: linear-gradient(top, #666, #999);
  67. margin-right: 0;
  68. padding: 10px 0 10px 0;
  69. text-decoration: none;
  70. }
  71. .inner_lp_toc .scorm_item_highlight a {
  72. color: #fff;
  73. margin-right: 1px;
  74. text-decoration: none;
  75. font-weight: bold;
  76. }
  77. .inner_lp_toc .scorm_item {
  78. font-size: 16px;
  79. margin-left: 10px;
  80. margin-right: 10px;
  81. text-decoration: none;
  82. border-color: rgba(255, 255, 255, 0.3);
  83. }
  84. .inner_lp_toc .scorm_item_section .scorm_item:before {
  85. content: url('../../main/img/lp_section.png'); /* path from main/lp/lp_controller.php file */
  86. vertical-align: text-top;
  87. margin-right: 5px;
  88. }
  89. /* learning path's classes for section and item for 5 levels of depth */
  90. .scorm_section_level_0 {
  91. margin: 0 0 0 0;
  92. }
  93. .scorm_section_level_1 {
  94. margin: 0 0.5em 0 20px;
  95. }
  96. .scorm_section_level_2 {
  97. margin: 0 0.5em 0 40px;
  98. }
  99. .scorm_section_level_3 {
  100. margin: 0 0.5em 0 60px;
  101. }
  102. .scorm_section_level_4 {
  103. margin: 0 0.5em 0 70px;
  104. }
  105. .scorm_section_level_5 {
  106. margin: 0 0.5em 0 10em;
  107. }
  108. .scorm_item_normal {
  109. line-height: 25px;
  110. border-bottom: 1px solid #DDD;
  111. padding: 10px 0;
  112. }
  113. .level_0 {
  114. margin: 0;
  115. padding-left: 30px;
  116. }
  117. .level_1 {
  118. margin: 0 0.5em 0 20px;
  119. padding-left: 30px;
  120. }
  121. .level_2 {
  122. margin: 0 0.5em 0 40px;
  123. padding-left: 30px;
  124. }
  125. .level_3 {
  126. margin: 0 0.5em 0 60px;
  127. padding: 5px 5px 5px 30px;
  128. line-height: 14px;
  129. }
  130. .level_4 {
  131. margin: 0 0.5em 0 70px;
  132. padding-left: 30px;
  133. }
  134. .level_5 {
  135. margin: 0 0.5em 0 90px;
  136. padding-left: 30px;
  137. }
  138. #learning_path_breadcrumb_zone .breadcrumb {
  139. background-color: #2b3d53;
  140. border-radius: 0;
  141. -moz-border-radius: 0;
  142. -webkit-border-radius: 0;
  143. color: #ffffff;
  144. font-size: 12px;
  145. }
  146. #learning_path_breadcrumb_zone .breadcrumb a {
  147. color: #ffffff;
  148. text-decoration: none;
  149. }
  150. #learning_path_breadcrumb_zone .breadcrumb a:hover {
  151. color: #dddddd;
  152. }
  153. .total {
  154. width: 100%;
  155. }
  156. .view-options {
  157. padding-top: 3px;
  158. margin-right: 5px;
  159. }
  160. .panel-default .panel-heading .btn {
  161. top: -25px;
  162. }
  163. .panel-default .panel-heading .dropdown-menu {
  164. top: 30%;
  165. }
  166. #content-scorm .breadcrumb {
  167. padding: 5px;
  168. }
  169. .scorm-heading {
  170. font-size: 14px;
  171. padding-top: 5px;
  172. padding-bottom: 5px;
  173. }
  174. #control-bottom {
  175. position: fixed;
  176. bottom: 0;
  177. width: 100%;
  178. text-align: center;
  179. left: 0;
  180. }
  181. #control-bottom.well {
  182. margin-bottom: 0;
  183. }
  184. /*SCORM CSS BASE */
  185. #learning_path_left_zone .home {
  186. display: inline-block;
  187. width: 94%;
  188. margin-bottom: .5em;
  189. margin-top: .5em;
  190. font-size: 12px;
  191. }
  192. /* for section */
  193. .scorm_item_section {
  194. border-bottom: 1px solid #DDD;
  195. font-size: 14px;
  196. font-weight: bold;
  197. }
  198. .scorm_item_section .section {
  199. background: url("../../main/img/scorm/folder-item-closed.png") no-repeat 10px center;
  200. padding: 10px 20px 10px 35px;
  201. }
  202. .scorm_item_section.scorm_completed .section {
  203. background: url("../../main/img/scorm/folder-item-open.png") no-repeat 10px center;
  204. padding-right: 1.5em;
  205. }
  206. .scorm_item_normal a.items-list {
  207. color: #666666;
  208. display: inline-block;
  209. width: 100%;
  210. }
  211. .scorm_item_normal a:hover {
  212. text-decoration: none;
  213. }
  214. .scorm_item_normal.scorm_completed {
  215. background-color: #F5F5F5;
  216. }
  217. .scorm_item_section.scorm_completed {
  218. background-color: #F5F5F5;
  219. color: #000;
  220. }
  221. .scorm_completed .item {
  222. background: url("../../main/img/scorm/scorm_completed.png") no-repeat 10px center;
  223. }
  224. .scorm_completed .item a {
  225. color: #000;
  226. }
  227. .scorm_failed .item {
  228. background: url("../../main/img/scorm/scorm_failed.png") no-repeat 10px center;
  229. }
  230. .scorm_not_attempted .item {
  231. background: url("../../main/img/scorm/scorm_not_attempted.png") no-repeat 10px center;
  232. }
  233. .scorm_highlight .item {
  234. background: url("../../main/img/scorm/scorm_highlight.png") no-repeat 10px center !important;
  235. color: #009AB8;
  236. }
  237. .scorm_highlight.scorm_completed .item {
  238. background: url("../../main/img/scorm/scorm_current.png") no-repeat 10px center !important;
  239. }
  240. .scorm_highlight.scorm_failed .item {
  241. background: url("../../main/img/scorm/scorm_failed.png") no-repeat 10px center !important;
  242. }
  243. .scorm_highlight a {
  244. /* color: #FFFFFF !important;*/
  245. }
  246. .scorm_item_normal.scorm_highlight {
  247. background-color: #00829C;
  248. }
  249. .scorm_item_normal.scorm_highlight a {
  250. /* color: #FFFFFF; once again this make links invisible!! */
  251. }
  252. /* END SCORM CSS BASE*/
  253. #scorm-info {
  254. padding: 0;
  255. background-color: #EBF3F5;
  256. display: inline-block;
  257. width: 100%;
  258. }
  259. #scorm-info .description-autor p {
  260. font-size: 12px;
  261. line-height: 20px;
  262. color: #666666;
  263. }
  264. #scorm-info hr {
  265. width: 100%;
  266. border-top: 1px solid #d7d7d7;
  267. margin-top: 5px;
  268. margin-bottom: 10px;
  269. }
  270. #scorm-info #progress_bar .progress {
  271. margin-bottom: 5px;
  272. }
  273. .image-avatar .media-left img,
  274. .image-avatar img {
  275. border: 1px solid #DDD;
  276. border-radius: 5px;
  277. }
  278. .image-avatar {
  279. padding-top: 10px;
  280. padding-bottom: 10px;
  281. }
  282. .scorm-title {
  283. padding: 10px;
  284. display: inline-block;
  285. width: 100%;
  286. }
  287. .scorm-body{
  288. display: inline-block;
  289. width: 100%;
  290. }
  291. .scorm-title h4 {
  292. font-size: 18px;
  293. font-weight: bold;
  294. color: #686f7a;
  295. }
  296. .lp-view-tabs{
  297. margin-top: 4px;
  298. }
  299. #learning_path_right_zone .lp-view-tabs li a {
  300. padding: 5px;
  301. }
  302. #learning_path_main {
  303. height: 100%;
  304. margin: 0;
  305. overflow: hidden;
  306. position: absolute;
  307. width: 100%;
  308. }
  309. #learning_path_left_zone,
  310. #learning_path_right_zone {
  311. bottom: 0;
  312. box-sizing: content-box;
  313. left: 0;
  314. margin: 0;
  315. padding: 0;
  316. position: absolute;
  317. right: 0;
  318. top: 0;
  319. transition-property: left, width;
  320. transition-duration: 0.5s;
  321. }
  322. #learning_path_right_zone #wrapper-iframe {
  323. height: 100%;
  324. width: 100%;
  325. }
  326. #learning_path_left_zone .lp-view-zone-container,
  327. #learning_path_right_zone .lp-view-zone-container {
  328. bottom: 0;
  329. left: 0;
  330. padding: 0;
  331. position: absolute;
  332. right: 0;
  333. top: 0;
  334. }
  335. #learning_path_toc {
  336. bottom: 0;
  337. left: 0;
  338. overflow: auto;
  339. position: absolute;
  340. right: 0;
  341. top: 100%;
  342. transition-property: top;
  343. transition-duration: 0.1s;
  344. }
  345. #learning_path_right_zone {
  346. left: 100%;
  347. width: 100%;
  348. }
  349. #learning_path_right_zone.no-right-col {
  350. left: 0;
  351. }
  352. #learning_path_right_zone .lp-view-tabs .tab-content {
  353. bottom: 0;
  354. left: 0;
  355. position: absolute;
  356. right: 0;
  357. top: 45px;
  358. border: 1px solid #dddddd;
  359. border-top: none;
  360. }
  361. #learning_path_right_zone .tab-pane {
  362. height: 100%;
  363. position: relative;
  364. }
  365. #learning_path_right_zone .tab-pane iframe {
  366. border: 0 none;
  367. height: 100%;
  368. width: 100%;
  369. }
  370. #learning_path_main.lp-view-collapsed #learning_path_left_zone {
  371. left: -100%;
  372. }
  373. #learning_path_main.lp-view-collapsed #learning_path_right_zone {
  374. left: 0;
  375. width: 100%;
  376. }
  377. .iframe_sco{
  378. top: 0 !important;
  379. }
  380. .nav-tabs li.active a {
  381. color: #006A84;
  382. }
  383. .nav-tabs li a {
  384. color: #666666;
  385. }
  386. #lp-view-expand-button {
  387. border: none;
  388. background: none;
  389. padding: 0;
  390. margin: 0;
  391. }
  392. .icon-toolbar .fa {
  393. width: 35px;
  394. height: 35px;
  395. line-height: 35px;
  396. text-align: center;
  397. border-radius: 100%;
  398. background-color: #34495E;
  399. font-size: 20px;
  400. color: #FFF;
  401. }
  402. .icon-toolbar .fa:hover {
  403. background-color: #000;
  404. }
  405. .expand .fa {
  406. background-color: #00829C;
  407. }
  408. .expand .fa:hover {
  409. background-color: #006A84;
  410. color: #ffffff;
  411. }
  412. .expand .fa:active, .expand .fa:focus {
  413. color: #ffffff;
  414. }
  415. #scorm-info .progress-bar {
  416. line-height: 17px;
  417. }
  418. .actions_lp {
  419. display: inline-block;
  420. width: 100%;
  421. text-align: center;
  422. }
  423. /** MENU FLOAT **/
  424. .circular-menu {
  425. height: auto;
  426. left: 0;
  427. top: 0;
  428. position: fixed;
  429. z-index: 5;
  430. }
  431. .circle {
  432. opacity: 0;
  433. margin-left: 50px;
  434. margin-top: 4px;
  435. padding: 2px;
  436. border-radius: 20px;
  437. background-color: #ffffff;
  438. border: 1px solid #8dcbf3;
  439. -webkit-transform: translate(-100%);
  440. -moz-transform: translate(-100%);
  441. -transform: translate(-100%);
  442. -webkit-transition: all 0.4s ease-out;
  443. -moz-transition: all 0.4s ease-out;
  444. transition: all 0.4s ease-out;
  445. }
  446. .open.circle {
  447. opacity: 1;
  448. -webkit-transform: translate(0%);
  449. -moz-transform: translate(0%);
  450. -transform: translate(0%);
  451. }
  452. .circle a {
  453. text-decoration: none;
  454. color: #fff;
  455. display: inline-block;
  456. height: 35px;
  457. width: 35px;
  458. line-height: 35px;
  459. text-align: center;
  460. border-radius: 100%;
  461. }
  462. .circle a:hover {
  463. color: #eef;
  464. }
  465. .menu-button {
  466. position: absolute;
  467. top: 5px;
  468. left: 5px;
  469. text-align: center;
  470. border-radius: 50%;
  471. display: block;
  472. height: 40px;
  473. width: 40px;
  474. line-height: 19px;
  475. padding: 10px;
  476. background: #ffffff;
  477. font-size: 16px;
  478. border: 1px solid #8dcbf3;
  479. }
  480. .menu-button:hover {
  481. background-color: #ffffff;
  482. }
  483. /* LP VIEW COLLAPSE */
  484. .scorm-collapse .panel:hover {
  485. box-shadow: 0 3px 1px 0 rgba(20, 23, 28, .1);
  486. }
  487. .scorm-collapse .panel-default .panel-heading {
  488. background: url(../../../../main/img/icons/svg/arrow-down.svg) #FFF right center no-repeat;
  489. padding-top: 0;
  490. padding-bottom: 0;
  491. }
  492. .scorm-collapse a.item-header {
  493. padding-bottom: 4px;
  494. padding-top: 10px;
  495. }
  496. .scorm-collapse .panel-default .panel-heading h4 {
  497. font-size: 18px;
  498. font-weight: 600;
  499. }
  500. .scorm-collapse a {
  501. color: #686f7a;
  502. }
  503. .scorm-collapse a.item-action,
  504. .scorm-collapse a.item-header {
  505. width: 100%;
  506. display: inline-block;
  507. }
  508. .scorm-collapse .panel-body {
  509. padding: 0;
  510. }
  511. .scorm-collapse .panel-body .list {
  512. list-style: none;
  513. padding: 0;
  514. margin: 0;
  515. }
  516. .scorm-collapse .panel-body .list li {
  517. padding: 15px 30px 15px 20px;
  518. border-bottom: 1px solid #dddddd;
  519. margin-bottom: 0;
  520. }
  521. .scorm-collapse .panel-body .list li:last-child {
  522. border-bottom: none;
  523. }
  524. .scorm_item_normal.scorm_completed {
  525. background: url(../../../../main/img/icons/svg/check-completed.svg) #F5F5F5 right center no-repeat;
  526. }
  527. .scorm_item_normal.scorm_not_attempted {
  528. background: url(../../../../main/img/icons/svg/check-not-attempted.svg) #FFFFFF right center no-repeat;
  529. }
  530. .scorm_item_normal.scorm_highlight.scorm_not_attempted {
  531. background: url(../../../../main/img/icons/svg/check-not-attempted.svg) #00829C right center no-repeat;
  532. }
  533. .scorm_item_normal.scorm_highlight.scorm_completed {
  534. background: url(../../../../main/img/icons/svg/check-highlight.svg) #00829C right center no-repeat;
  535. }
  536. .sidebar-scorm {
  537. border-right: 1px solid #e6e6e6;
  538. }
  539. .scorm-collapse-list {
  540. padding: 0;
  541. margin: 0 0 10px 0;
  542. list-style: none;
  543. }
  544. .scorm-collapse-list li {
  545. margin-bottom: 0;
  546. padding-bottom: 10px;
  547. padding-top: 10px;
  548. }
  549. .scorm-collapse-list .sub-item {
  550. padding-left: 20px;
  551. }
  552. .scorm_item_normal.scorm_highlight a {
  553. color: #FFFFFF;
  554. }
  555. .tab-none-forum{
  556. top: 0 !important;
  557. }
  558. .circular-menu.none-forum{
  559. top: 0 !important;
  560. }
  561. .tabs-right li{
  562. display: inline-block;
  563. float: initial;
  564. }
  565. .tabs-right{
  566. text-align: right;
  567. }
  568. /* END LP VIEW COLLAPSE */
  569. /* Small devices (tablets, 768px and up) */
  570. @media (min-width: 768px) {
  571. #learning_path_left_zone {
  572. width: 250px;
  573. }
  574. #learning_path_right_zone {
  575. left: 250px;
  576. width: calc(100% - 250px);
  577. }
  578. #learning_path_right_zone.no-right-col {
  579. width: 100%;
  580. }
  581. #learning_path_main.lp-view-include-breadcrumb #learning_path_left_zone,
  582. #learning_path_main.lp-view-include-breadcrumb #learning_path_right_zone {
  583. top: 0;
  584. }
  585. #learning_path_right_zone .lp-view-tabs .tab-content {
  586. bottom: 0;
  587. right: 0;
  588. top: 45px;
  589. left: 0;
  590. }
  591. #learning_path_right_zone .tab-pane {
  592. }
  593. #learning_path_right_zone .tab-pane iframe {
  594. }
  595. }
  596. /* Medium devices (desktops, 992px and up) */
  597. @media (min-width: 992px) {
  598. #learning_path_left_zone {
  599. width: 300px;
  600. }
  601. #learning_path_right_zone {
  602. left: 300px;
  603. width: calc(100% - 300px);
  604. }
  605. }
  606. /* Large devices (large desktops, 1200px and up) */
  607. @media (min-width: 1200px) {
  608. #learning_path_left_zone {
  609. width: 450px;
  610. }
  611. #learning_path_right_zone {
  612. left: 465px;
  613. width: calc(100% - 465px);
  614. }
  615. }
  616. @media (min-width: 979px) and (max-width: 1024px) {
  617. #panel-scorm .image-avatar {
  618. display: none;
  619. }
  620. }
  621. @media (min-width: 768px) and (max-width: 978px) {
  622. #panel-scorm .image-avatar {
  623. display: none;
  624. }
  625. }
  626. @media (min-width: 480px) and (max-width: 767px) {
  627. #panel-scorm .image-avatar {
  628. display: none;
  629. }
  630. #scorm-info {
  631. padding: 0;
  632. margin: 0;
  633. }
  634. #learning_path_left_zone .lp-view-zone-container,
  635. #learning_path_right_zone .lp-view-zone-container {
  636. padding: 0;
  637. }
  638. #scorm-info {
  639. padding: 30px 0 0 0;
  640. margin: 0;
  641. }
  642. }
  643. /* Landscape phones and down */
  644. @media (max-width: 480px) {
  645. .scorm-title {
  646. font-size: 14px;
  647. padding: 10px;
  648. }
  649. .movil-toolbar {
  650. width: 100%;
  651. height: auto;
  652. }
  653. .scorm_item_normal {
  654. padding: 10px 5px;
  655. }
  656. .icon-toolbar .fa {
  657. width: 35px;
  658. height: 35px;
  659. line-height: 35px;
  660. font-size: 22px;
  661. }
  662. .btn-movil {
  663. width: 130px;
  664. margin: auto;
  665. }
  666. #scorm-info {
  667. padding: 30px 0 0 0;
  668. margin: 0;
  669. }
  670. #learning_path_right_zone {
  671. left: 100%;
  672. width: auto;
  673. }
  674. #panel-scorm .image-avatar {
  675. display: none;
  676. }
  677. #learning_path_left_zone .lp-view-zone-container,
  678. #learning_path_right_zone .lp-view-zone-container {
  679. padding: 0;
  680. }
  681. #scorm-info hr {
  682. display: none;
  683. }
  684. }