You are here

Home » API reference » Footnotes 8.2

footnotes.css in Footnotes 8.2 

/*
 * CSS specific to Footnotes module.
*
* Thanks to binford2k@lug.wsu.edu for this tip and drinkypoo
* for the question leading up to it. http://drupal.org/node/80538
*/

/* Add empty space before footnotes and a black line on top. */
.footnotes {
  clear: both;
  margin-top: 4em;
  margin-bottom: 2em;
  border-top: 1px solid #000;
}
/* Make footnotes appear in a smaller font */
.footnotes {
  font-size: 0.9em;
}
/*
  Make the footnote a supertext^1
*/
.see-footnote {
  vertical-align: top;
  position: relative;
  top: -0.25em;
  font-size: 0.9em;
}
/* Hide the bullet of the UL list of footnotes */

ul.footnotes {
  list-style-type: none;
  margin-left: 0;
  padding-left: 0;
}
ul.footnotes li {
  margin-left: 2.5em;
  list-style-type: none;
  background: none; /* Garland theme sets a bullet via background image, this must be unset! See bug 861634 */
}
/* Move the footnote number outside of the margin for footnote text (hanging indent) */
ul.footnotes {
  /* This is apparently very needed for the "position: absolute;" below to work correctly */
  position: relative;
}
.footnotes .footnote-label {
  position: absolute;
  left: 0;
  z-index: 2;
}
/* Highlight the target footnote (or ref number, if a backlink was used) when user clicks a footnote. */
.see-footnote:target,
.footnotes .footnote:target {
  background-color: #eee;
}
.see-footnote:target {
  border: solid 1px #aaa;
}
/* Note: This CSS has a minor bug on all versions of IE in that the footnote numbers
are aligned with the absolute bottom of their space, thus being a couple of pixels
lower than their corresponding line of text. IE5.5 has a serious bug in that the numbers
are not shifted left at all, thus being garbled together with the start of their text. */

/*
  Make the multiple backlinks a supertext^1
*/
.footnotes .footnote-multi {
  vertical-align: top;
  position: relative;
  top: -0.25em;
  font-size: 0.75em;
}
/*
 * Textile Footnotes
 */
/* First footnote */
#fn1 {
  border-top: 1px solid #000;
  margin-top: 3em;
}
.footnote {
  font-size: 0.9em;
}

File

assets/css/footnotes.css
View source 
  1. /*

  2.  * CSS specific to Footnotes module.

  3. *

  4. * Thanks to binford2k@lug.wsu.edu for this tip and drinkypoo

  5. * for the question leading up to it. http://drupal.org/node/80538

  6. */

  7. 

  8. /* Add empty space before footnotes and a black line on top. */

  9. .footnotes {

  10.   clear: both;

  11.   margin-top: 4em;

  12.   margin-bottom: 2em;

  13.   border-top: 1px solid #000;

  14. }

  15. /* Make footnotes appear in a smaller font */

  16. .footnotes {

  17.   font-size: 0.9em;

  18. }

  19. /*

  20.   Make the footnote a supertext^1

  21. */

  22. .see-footnote {

  23.   vertical-align: top;

  24.   position: relative;

  25.   top: -0.25em;

  26.   font-size: 0.9em;

  27. }

  28. /* Hide the bullet of the UL list of footnotes */

  29. 

  30. ul.footnotes {

  31.   list-style-type: none;

  32.   margin-left: 0;

  33.   padding-left: 0;

  34. }

  35. ul.footnotes li {

  36.   margin-left: 2.5em;

  37.   list-style-type: none;

  38.   background: none; /* Garland theme sets a bullet via background image, this must be unset! See bug 861634 */

  39. }

  40. /* Move the footnote number outside of the margin for footnote text (hanging indent) */

  41. ul.footnotes {

  42.   /* This is apparently very needed for the "position: absolute;" below to work correctly */

  43.   position: relative;

  44. }

  45. .footnotes .footnote-label {

  46.   position: absolute;

  47.   left: 0;

  48.   z-index: 2;

  49. }

  50. /* Highlight the target footnote (or ref number, if a backlink was used) when user clicks a footnote. */

  51. .see-footnote:target,

  52. .footnotes .footnote:target {

  53.   background-color: #eee;

  54. }

  55. .see-footnote:target {

  56.   border: solid 1px #aaa;

  57. }

  58. /* Note: This CSS has a minor bug on all versions of IE in that the footnote numbers

  59. are aligned with the absolute bottom of their space, thus being a couple of pixels

  60. lower than their corresponding line of text. IE5.5 has a serious bug in that the numbers

  61. are not shifted left at all, thus being garbled together with the start of their text. */

  62. 

  63. /*

  64.   Make the multiple backlinks a supertext^1

  65. */

  66. .footnotes .footnote-multi {

  67.   vertical-align: top;

  68.   position: relative;

  69.   top: -0.25em;

  70.   font-size: 0.75em;

  71. }

  72. /*

  73.  * Textile Footnotes

  74.  */

  75. /* First footnote */

  76. #fn1 {

  77.   border-top: 1px solid #000;

  78.   margin-top: 3em;

  79. }

  80. .footnote {

  81.   font-size: 0.9em;

  82. }