Subversion Repositories wimsdev

Rev

Rev 17571 | Blame | Compare with Previous | Last modification | View Log | RSS feed

  1. /***
  2.   WIMS styles for OEF exercices
  3. ***/
  4.  
  5. .main_body>.ui-dialog {
  6.   /* moves jquery-ui dialog box over everything else (even jmol applet) */
  7.   z-index: 10001;
  8. }
  9.  
  10. /* OEF STYLES */
  11. #oef_intro_params {
  12.   border-color: #BBB gray gray #BBB;
  13.   border-radius: 10px;
  14.   border-style: solid;
  15.   border-width: 1px;
  16.   padding: 0;
  17. }
  18.  
  19. @media print,
  20. screen and (min-width: 40em) {
  21.   #oef_intro_params {
  22.     margin: 1em auto;
  23.     width: 80%;
  24.   }
  25. }
  26.  
  27. #oef_intro_params .legend {
  28.   border-top-left-radius: 10px;
  29.   border-top-right-radius: 10px;
  30. }
  31.  
  32. #oef_intro_params label {
  33.   font-weight: bold;
  34. }
  35.  
  36. #oef_intro_params .field {
  37.   /*margin: 1em 0;*/
  38.   padding: .5em 1em;
  39. }
  40.  
  41. #oef_intro_params select#exo {
  42.   width: 100%;
  43. }
  44.  
  45. .oef_intro_buttons {
  46.   text-align: center;
  47. }
  48.  
  49. #oef_devel_mode {
  50.   font-size: small;
  51. }
  52.  
  53. .oefform .send_answer,
  54. #oef_actions {
  55.   text-align: center;
  56. }
  57.  
  58. .send_answer {
  59.   margin-top: .5em;
  60. }
  61.  
  62. #oef_actions {
  63.   margin: 1em 0;
  64. }
  65.  
  66. #oef_actions p {
  67.   margin: .2em;
  68. }
  69.  
  70. /*.oefhint {padding-top: 2px;}*/
  71.  
  72. .oefreply {
  73.   margin: 1em;
  74. }
  75.  
  76. /*.oefanswer {}
  77. .oef_modulescore { }
  78. .oef_congratulations { }*/
  79.  
  80. .oefanswer table {
  81.   font-size: .9em;
  82.   border-collapse: collapse;
  83. }
  84.  
  85. .wims_oef_input {
  86.   padding-top: 2px;
  87.   padding-right: 1px;
  88.   padding-bottom: 2px;
  89.   padding-left: 1px;
  90.   font-weight: bold;
  91.   font-size: 1.2em;
  92. }
  93.  
  94. .oefanswername {
  95.   font-size: 125%;
  96. }
  97.  
  98. .oefstatement {
  99.   border: 1px groove ThreeDFace;
  100.   padding: 5px;
  101.   margin-bottom: 3px;
  102. }
  103.  
  104. .oefstatement table {
  105.   border-collapse: collapse;
  106. }
  107.  
  108. .oefstatement sub {
  109.   bottom: -.5em;
  110. }
  111.  
  112. .oefstatement sup {
  113.   top: -1em;
  114. }
  115.  
  116. .oefstatement sup,
  117. .oefstatement sub {
  118.   line-height: 3em;
  119. }
  120.  
  121. .oef_enterreply {
  122.   font-size: 1.25rem;
  123. }
  124.  
  125. .answer_analysis {
  126.   margin-bottom: 1em;
  127.   border: 1px groove ThreeDFace;
  128.   border-bottom-left-radius: 10px;
  129.   border-bottom-right-radius: 10px;
  130. }
  131.  
  132. .legend {
  133.   margin-top: 0;
  134.   padding: .5em 1em;
  135.   border-bottom: 1px groove ThreeDFace;
  136.   text-align: center;
  137.   font-weight: bold;
  138. }
  139.  
  140. .answer_analysis .content {
  141.   padding: 1em;
  142. }
  143.  
  144. .oefform {
  145.   padding: .5em;
  146. }
  147.  
  148. .oefnameexo {
  149.   display: inline;
  150.   font-style: italic;
  151. }
  152.  
  153. /* OEF Colors legend */
  154. .oef_indlegend ul {
  155.   padding-left: 1em;
  156. }
  157.  
  158. .oef_indlegend li {
  159.   list-style: none;
  160. }
  161.  
  162. .oef_indlegend li:first-letter {
  163.   text-transform: capitalize
  164. }
  165.  
  166. .oef_indlegend li:before {
  167.   content: "\00B7";
  168.   font-size: 70px;
  169.   vertical-align: text-bottom;
  170.   line-height: 1.5rem;
  171. }
  172.  
  173. /* this class must stay empty  */
  174. .oef_empty {}
  175.  
  176. /* for exercice modules in preparation (not OEF)*/
  177. /*.module_score { }
  178. .statement { }
  179. .congratulations { }*/
  180.  
  181. /* for latex solution in print version */
  182. /*div.wims_solution {}*/
  183. /* table of questions in case of noembedding */
  184. .oefnoembed td {
  185.   min-width: 70px;
  186.   margin-top: 5px;
  187.   margin-bottom: 5px;
  188. }
  189.  
  190. ul.oef_filter {
  191.   list-style: none
  192. }
  193.  
  194. /* link in the help on the oef special method help must be left to the exercise*/
  195. /*.oef_specialhelp { }*/
  196.  
  197. /*** ANSTYPES ***/
  198.  
  199. :root {
  200.   --oef-drag-color: #b3ddef;
  201.   --oef-grab-color: #87ceeb;
  202. }
  203.  
  204. /** dragfill/clickfill **/
  205.  
  206. /* replace the old "table" with a flexbox div */
  207. .wims_fill_object {
  208.   display: flex;
  209.   align-items: center;
  210.   height: 100%;
  211. }
  212.  
  213. .drag_label {
  214.   display: flex;
  215.   align-items: center;
  216.   padding: 2px;
  217.   border: 1px solid #999;
  218.   box-sizing: border-box;
  219.   margin: 1px;
  220.   background-color: var(--oef-drag-color);
  221.   overflow: auto;
  222. }
  223.  
  224. .fill_container {
  225.   display: inline-flex;
  226.   flex-flow: row wrap;
  227.   font-family: sans-serif;
  228.   background-color: #ffd080;
  229.   margin: 2px;
  230. }
  231.  
  232. .wims_grabbable {
  233.   background-color: var(--oef-grab-color);
  234.   cursor: move;
  235.   /* fallback if grab cursor is unsupported */
  236.   cursor: grab;
  237. }
  238.  
  239. /* Apply a "closed-hand" cursor during drag operation. */
  240. .wims_grabbable:active {
  241.   cursor: grabbing;
  242. }
  243.  
  244. .wims_droppable {
  245.   cursor: pointer;
  246.   background-color: #ffd080;
  247. }
  248.  
  249. .wims_grabbable:hover,
  250. .wims_droppable:hover {
  251.   border-color: #004077;
  252. }
  253.  
  254. .wims_droppable:hover {
  255.   font-weight: 700;
  256. }
  257.  
  258. /** prevent selecting text while grabbing **/
  259. .wims_grabbable,
  260. .wims_droppable {
  261.   user-select: none;
  262.   -webkit-user-select: none;
  263.   transition: border-color .5s;
  264.   border: 1px solid transparent;
  265.   box-sizing: border-box;
  266. }
  267.  
  268. /* Used in multipleclick OEF answer */
  269. .ans_label {
  270.   display: flex;
  271.   align-items: center;
  272.   justify-content: center;
  273.   box-sizing: border-box;
  274.   height: 100%;
  275. }
  276.  
  277. a.ans_label:hover {
  278.   background-color: rgb(255 255 255 / .2);
  279. }
  280.  
  281. .answeranalysis .ans_label,
  282. div[class^="oef_ind"] .jxgbox {
  283.   border-width: 2px;
  284.   border-style: solid;
  285. }
  286.  
  287. .ans_label.oef_indgood,
  288. .feedback.oef_indgood,
  289. .oef_indgood .jxgbox {
  290.   border-color: var(--oef_indgood);
  291. }
  292.  
  293. .ans_label.oef_indbad,
  294. .feedback.oef_indbad,
  295. .oef_indbad .jxgbox {
  296.   border-color: var(--oef_indbad);
  297. }
  298.  
  299. .ans_label.oef_indforget,
  300. .feedback.oef_indforget,
  301. .oef_indforget .jxgbox {
  302.   border-color: var(--oef_indforget);
  303. }
  304.  
  305. .ans_label.oef_indneutral,
  306. .feedback.oef_indneutral,
  307. .oef_indneutral .jxgbox {
  308.   color: #999;
  309.   border-color: #999;
  310. }
  311.  
  312. .feedback.oef_indpartial,
  313. .oef_indpartial .jxgbox {
  314.   border-color: var(--oef_indpartial);
  315. }
  316.  
  317. /*.ans_multipleclick a{display:flex;height:100%;align-items: center;justify-content: center;}*/
  318.  
  319. /** Add text icons to ans_multipleclick answered labels **/
  320. .ans_multipleclick .ans_label {
  321.   flex-wrap: wrap;
  322. }
  323.  
  324. .ans_multipleclick .ans_label:before {
  325.   width: 100%;
  326.   text-align: center;
  327. }
  328.  
  329. div[class^='oef_ind'] .jsxwrap:before,
  330. .legend_multipleclick>li:before {
  331.   font-size: 1.5em;
  332. }
  333.  
  334. div[class^='oef_ind'] .jsxwrap:before {
  335.   text-align: center;
  336.   width: 100%;
  337.   display: block;
  338. }
  339.  
  340. .legend_multipleclick>li:before {
  341.   vertical-align: middle;
  342.   margin-right: .5em;
  343. }
  344.  
  345. .ans_multipleclick .ans_label.oef_indbad:before,
  346. .legend_multipleclick>.oef_indbad:before,
  347. .oef_indbad .jsxwrap:before {
  348.   content: "X";
  349. }
  350.  
  351. .ans_multipleclick .ans_label.oef_indgood:before,
  352. .legend_multipleclick>.oef_indgood:before,
  353. .oef_indgood .jsxwrap:before {
  354.   /* Check mark */
  355.   content: "\02713";
  356. }
  357.  
  358. .ans_multipleclick .ans_label.oef_indforget:before,
  359. .legend_multipleclick>.oef_indforget:before,
  360. .oef_indforget .jsxwrap:before {
  361.   /* empty set */
  362.   content: "\02205";
  363. }
  364.  
  365. .ans_multipleclick .ans_label.oef_indpartial:before,
  366. .legend_multipleclick>.oef_indpartial:before,
  367. .oef_indpartial .jsxwrap:before {
  368.   /* CIRCLE WITH UPPER RIGHT QUADRANT */
  369.   content: "\025D4";
  370. }
  371.  
  372. .feedback.oef_indgood,
  373. .feedback.oef_indbad,
  374. .feedback.oef_indpartial,
  375. .feedback.oef_indforget {
  376.   color: #000;
  377.   font-weight: normal;
  378. }
  379.  
  380. /** change the drag_label & ans_label colors when it indicates a feedback **/
  381. .oef_indgood .drag_label,
  382. .ans_label.oef_indgood,
  383. .feedback.oef_indgood {
  384.   background-color: #e1faea;
  385. }
  386.  
  387. .oef_indbad .drag_label,
  388. .ans_label.oef_indbad,
  389. .feedback.oef_indbad {
  390.   background-color: #f7e4e1;
  391. }
  392.  
  393. .oef_indpartial .drag_label,
  394. .ans_label.oef_indpartial,
  395. .feedback.oef_indpartial {
  396.   background-color: #fff3d9;
  397. }
  398.  
  399. .ans_label.oef_indforget,
  400. .feedback.oef_indforget {
  401.   background-color: #d9f3ff;
  402. }
  403.  
  404. /* #CANVASDRAW **/
  405. div:not(.wims_scrollable)>.canvas_wrapper {
  406.   width: 100% !important;
  407.   height: auto !important;
  408. }
  409.  
  410. .canvas_wrapper {
  411.   margin-left: auto;
  412.   margin-right: auto;
  413.   position: relative;
  414. }
  415.  
  416. .canvas_wrapper>canvas {
  417.   width: 100%;
  418. }
  419.  
  420. .tooltip_placeholder {
  421.   display: none;
  422. }
  423.  
  424. .canvasdraw_xml {
  425.   position: absolute;
  426. }
  427.  
  428. .canvas_center {
  429.   display: flex;
  430.   align-items: center;
  431.   justify-content: center;
  432.   left: 0;
  433.   top: 0;
  434.   width: 100%;
  435.   height: 100%;
  436. }
  437.  
  438. .canvas_draggable {
  439.   cursor: grab;
  440. }
  441.  
  442. .canvas_draggable:hover {
  443.   opacity: .8;
  444.   background-color: #CCC5;
  445. }
  446.  
  447. .canvas_dragging {
  448.   cursor: grabbing;
  449.   box-shadow: 4px 4px 4px #CCC;
  450. }
  451.  
  452. .canvas_placeable {
  453.   display: flex;
  454.   cursor: pointer;
  455.   padding: 2px;
  456.   border: 1px solid #dfdfdf;
  457.   box-sizing: border-box;
  458.   transition: border-color .5s, background-color .5s;
  459. }
  460.  
  461. .canvas_placeable:hover,.canvas_placeable:focus {
  462.   border-color: var(--oef-grab-color);
  463. }
  464.  
  465. .canvas_placeable.selected {
  466.   background-color: var(--oef-drag-color);
  467. }
  468.  
  469. /** OEF Clock **/
  470. div.wims_clock{
  471.   margin: 0 1px;
  472.   text-align: right;
  473. }
  474.