Subversion Repositories wimsdev

Rev

Rev 15120 | Rev 15620 | Go to most recent revision | Blame | Compare with Previous | Last modification | View Log | RSS feed

  1. /* Utilities.css  put an explanation for each line as it is used to generate help for css in createxo */
  2. /* check with css.pl when it is changed -> createxo help */
  3.  
  4. /* @text-right, align to the right */
  5. .text-right{text-align:right;}
  6. /* @text-left, align to the left */
  7. .text-left {text-align:left;}
  8.  
  9. /* @center, center */
  10. .center, .wimscenter{text-align:center;}
  11. /* @wimscenter, center with margins */
  12. div.wimscenter{ margin:.8em .5em .8em .5em; }
  13. /* */
  14. .wimscenter>.ggbapplet,.wimscenter>[id^="jmolApplet"],
  15. .wimscenter>table{margin:0 auto;}
  16. /* @blockcenter, center a block as a table */
  17. .blockcenter{
  18.   margin-right:auto;
  19.   margin-left: auto;
  20. }
  21.  
  22. /* */
  23. img.wimscenter { margin-left:auto;margin-right:auto;}
  24. /* @white,background in white */
  25. .white{background-color: white;}
  26. /* @float_right, text float on the right */
  27. .float_right{ float:right;}
  28. /* @float_left, text float on the left */
  29. .float_left{ float:left;}
  30. /* @clearall, use it to stop float for example with br/ */
  31. .clearall{ clear: both;}
  32.  
  33. /* @clearfix, use it to contain floats without altering what's next.*/
  34. .clearfix::after {
  35.   content: "";
  36.   clear: both;
  37.   display: table;
  38. }
  39.  
  40. /* @small, text is smaller */
  41. .small { font-size: 90%;}
  42. /* @smaller, text smaller than small */
  43. .smaller { font-size: 70%;}
  44. /* @bold, text in bold */
  45. .bold { font-weight:bold;}
  46. /* @larger, text larger */
  47. .larger { font-size: 120%;}
  48.  
  49. /* @wims_emph, emphasis some part of the text */
  50. .wims_emph {font-style:italic;font-weight:bold;}
  51.  
  52. /* @inline, text in line (if you put inline directly on li, there will be no margin)*/
  53. /*.inline{ }*/
  54. div.inline, li.inline {/*zoom:1;*/display:inline;display:inline-block;}
  55.  
  56. /* @inline, Inline general lists */
  57. .inline>li{margin-right:2em;}
  58.  
  59. /* @inline, Inline Ordered Lists*/
  60. ol.inline{overflow: auto;}
  61. /* */
  62. ol.inline>li {float:left;}
  63. /* */
  64. ol.inline::after {clear: both;}
  65.  
  66. /* @inline, Inline Unordered Lists */
  67. ul.inline>li{display:inline-block;}
  68.  
  69. /* @wims_nopuce, list without puce */
  70. .wims_nopuce {list-style-type:none}
  71. .wims_nopuce ul{list-style-type:disc}
  72. .wims_nopuce ul ul{list-style-type:circle}
  73. .wims_nopuce ul ul ul{list-style-type:square}
  74.  
  75. /* @spacer, use spacer on div to add extra spaces */
  76. .spacer{
  77.   content: " ";
  78.   display: block;
  79.   padding-top: .6em;
  80.   /* on Mozilla, only margin is taken on <br> (not padding) */
  81.   margin-top: .6em;
  82.   margin-bottom: .6em;
  83. }
  84. /* @spacer,use spacer on lists (ul/ol) to add extra spaces on all li */
  85. ul.spacer>li,ol.spacer>li{
  86.   margin-bottom: .6em;
  87. }
  88.  
  89. /* @unbreakable, use unbreakable on a div surrounding a large text element that must not be wrapped (like a long math formula). But be aware of small screens! */
  90. .unbreakable {
  91.   display:block;
  92.   overflow-x:auto;
  93.   white-space: nowrap;
  94. }
  95.  
  96. /* @wims_video, default for HTML5 video player */
  97. .wims_video {
  98.   box-sizing: border-box;
  99.   max-width:100%;
  100.   margin:0;
  101.   background-color:#000;
  102.   box-shadow:2px 2px 2px gray;
  103.   white-space: nowrap;
  104. }
  105.  
  106. /* @wims_audio, default for audio */
  107. .wims_audio:not(.minimal_size) {
  108.   /** each browser has it's own audio player look.*/
  109.   /* audio width can't be below 87px */
  110.   width:50%;
  111.   margin:10px 0;
  112.   padding:0 5px;
  113. }
  114. .wims_audio{
  115.   min-width:87px;
  116.   white-space: nowrap;
  117. }
  118. audio.minimal_size{
  119.   margin:2px;
  120.   /* With Chrome, audio height is always 54px and can't be changed */
  121.   /*height:1.2em;*/
  122.   vertical-align:middle;
  123. }
  124.  
  125. /* styles for emphasing results of the student */
  126. /* CSS vars (*-* are replaced by mkcss.pl) */
  127. :root {
  128.   --oef_indgood: *-*oef_indgood;
  129.   --oef_condgood: *-*oef_condgood;
  130.   --oef_indbad: *-*oef_indbad;
  131.   --oef_condbad: *-*oef_condbad;
  132.   --oef_indforget: *-*oef_indforget;
  133.   --oef_indpartial: *-*oef_indpartial;
  134.   --oef_indprec: *-*oef_indprec;
  135. }
  136.  
  137. /* @oef_indgood, emphasing results of the student: good answer */
  138. .oef_indgood { color:*-*oef_indgood;font-weight:bold;}
  139. /* @oef_condgood, emphasing results of the student: good condition */
  140. .oef_condgood{ color:*-*oef_condgood;font-weight:bold;}
  141. /* @oef_indbad, emphasing results of the student: bad answer */
  142. .oef_indbad { color:*-*oef_indbad;font-weight:bold;}
  143. /* @oef_condbad, emphasing results of the student: bad condition */
  144. .oef_condbad { color:*-*oef_condbad;font-weight:bold;}
  145. /* @oef_indforget, emphasing results of the student: forgotten item in the answer */
  146. .oef_indforget { color:*-*oef_indforget;font-weight:bold;}
  147. /* @oef_indpartial, emphasing results of the student: partial answer */
  148. .oef_indpartial{ color:*-*oef_indpartial;font-weight:bold;}
  149. /* @oef_indprec, emphasing results of the student: bad precision */
  150. .oef_indprec   { color:*-*oef_indprec;font-weight:bold;}
  151. /* @oef_indneutral, emphasing results of the student, with no tip of answer status */
  152. .oef_indneutral{color:initial;font-weight:bold;}
  153.  
  154. /* @jxgbox, style for including a jsxgraph figure */
  155. .jxgbox {margin-left:auto;margin-right:auto;}
  156. /* */
  157. .jsxgraph_button {text-align:center;}
  158. /* */
  159. .jxgboxchild {margin-left:auto;margin-right:auto;}
  160.  
  161. /* @wims_contribute, contributor citation or credits */
  162. /* @wims_credits, contributor citation or credits */
  163. .wims_contribute, .wims_credits  {
  164.   padding-top: 10px;
  165.   padding-right:20px;
  166.   text-align:right;
  167.   color:#555;
  168.   font-weight:bold;
  169.   font-size:.8em;
  170. }
  171.  
  172. /* @wims_instruction, Technical instructions in exercises for example*/
  173. /* @wims_smallhelp, small help */
  174. /* @wims_difficultylevel, Difficulty level of the exercise or any other hint on the level */
  175. .wims_instruction, .wims_smallhelp, .wims_difficultylevel {
  176.   font-style: italic;
  177.   color: rgb(100,100,100);
  178.   background-color: rgba(230,230,230,.3);
  179.   border: 1px solid silver;
  180. }
  181.  
  182. .wims_instruction{
  183.   padding: 1rem;
  184.   margin: 0 auto 1rem auto;
  185. }
  186.  
  187. .wims_smallhelp {
  188.   font-size:small;
  189.   padding: 0 5px 1em;
  190.   margin: 1.5rem .5rem .2rem .5rem;
  191. }
  192.  
  193. .wims_instruction>h2,.wims_smallhelp>h2{
  194.   display: inline-block;
  195.   font-size: .8em;
  196.   padding: .4rem;
  197.   margin : -.3rem .5em .3em 0;
  198.   color: rgb(80,80,80);
  199.   background-color: silver;
  200. }
  201.  
  202. .wims_difficultylevel {
  203.   font-size:small;
  204.   padding: .1em 1px .1em;
  205. }
  206.  
  207. /* @wims_smallremark, remark in small */
  208. .wims_smallremark {font-size: small;}
  209.  
  210. /* @tt, tt*/
  211. .tt{
  212.   font-family: monospace, "Courier New";
  213.   border-left-width: 3px;
  214.   margin: 0;
  215.   padding: 0 3px;
  216. }
  217.  
  218. /* Prevent text selection */
  219. .unselectable{
  220.   user-select: none;
  221.   -webkit-user-select: none;
  222. }
  223. /* @wims_question, use wims_color1 */
  224. .wims_question {
  225.   border: 1px solid #CCC;
  226.   border-left-color: var(--wims_ref_bgcolor);
  227.   border-left-width: .2em;
  228.   margin: 2% 2%;
  229.   padding: 1em;
  230. }
  231.  
  232. /* for print version, to replace input radio or checkbox, it is a try ...*/
  233. ul.wims_list {
  234.   border: 1px solid var(--wims_ref_bgcolor);
  235.   padding-left:1em;
  236.   padding-right:2em
  237. }
  238. ul.wims_list li {
  239.   padding: 8px 16px;
  240.   border-bottom: 1px solid var(--wims_ref_bgcolor);
  241.   text-align:left;
  242. }
  243. .wims_checkbox li {list-style-type: square}
  244. .wims_radio li, .wims_menu li, .wims_click li {list-style-type: circle}
  245.