The original lightbox script, finally on github. http://lokeshdhakar.com/projects/lightbox2/
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

251 lines
4.0KB

  1. @import "compass/reset"
  2. @import "compass/css3"
  3. @import "compass/utilities/general/clearfix"
  4. @import "variables"
  5. /* Typography
  6. *----------------------------------------------- */
  7. body,
  8. input,
  9. textarea
  10. color: $color
  11. font-size: $fontSize
  12. font-family: $fontFamily
  13. h1,
  14. h2,
  15. h3,
  16. h4,
  17. h5,
  18. h6
  19. line-height: 1.2em
  20. color: $headingColor
  21. h1
  22. font-size: 72px
  23. line-height: 1em
  24. h2
  25. font-size: 48px
  26. line-height: 1.2em
  27. margin-bottom: 0.3em
  28. h3
  29. font-size: $fontSize
  30. text-transform: uppercase
  31. letter-spacing: 0.1em
  32. color: darken($headingColor, 30%)
  33. margin-bottom: 0.3em
  34. h4
  35. font-size: $fontSize
  36. p
  37. line-height: 1.4em
  38. margin-bottom: 1em
  39. ul, ol
  40. margin: 0 0 1.25em 0
  41. li
  42. line-height: 1.4em
  43. dt
  44. font-weight: bold
  45. dd
  46. margin-bottom: 1.625em
  47. strong
  48. font-weight: bold
  49. i
  50. font-style: italic
  51. pre
  52. padding: $gutter/4
  53. margin-bottom: $gutter/2
  54. background-color: darken($bgColor, 10%)
  55. font: $fontSize - 6 "Andale Mono", "DejaVu Sans Mono", monospace
  56. line-height: 1.5em
  57. +border-radius($radius)
  58. code, kbd
  59. padding: $gutter/10
  60. background-color: darken($bgColor, 10%)
  61. font: $fontSize - 6 "Andale Mono", "DejaVu Sans Mono", monospace
  62. +border-radius($radius)
  63. pre code
  64. font-size: 13px
  65. background: transparent
  66. +box-shadow(none)
  67. padding: 0
  68. a
  69. color: $linkColor
  70. text-decoration: none
  71. &:hover
  72. color: lighten($linkColor, 30%)
  73. ::-moz-selection,
  74. ::selection
  75. background: $orange
  76. color: white
  77. /* -- Layout ------------------------------------------------------------------ */
  78. body
  79. margin: $gutter $gutter $gutter*2 $gutter
  80. background: $bgColor
  81. .wrapper
  82. max-width: $maxColumnWidth
  83. margin: 0 auto
  84. .section
  85. padding: 0 0 $gutter 0
  86. margin-bottom: $gutter
  87. +pie-clearfix
  88. border-bottom: 4px solid darken($bgColor, 5%)
  89. &:last-child
  90. border-top: none
  91. .section-header
  92. text-align: center
  93. .row
  94. +pie-clearfix
  95. /* -- Sections ------------------------------------------------------------------ */
  96. /* -- Intro -- */
  97. .intro-section
  98. text-align: center
  99. .logo
  100. color: white
  101. margin-bottom: 0.05em
  102. .version
  103. color: $yellow
  104. .author
  105. line-height: 1.2em
  106. .author-links
  107. font-size: $fontSize - 4
  108. .lead
  109. font-size: $fontSize + 4
  110. /* -- Examples -- */
  111. .image-row
  112. +pie-clearfix
  113. margin-bottom: $gutter/2
  114. .example-image-link
  115. display: block
  116. float: left
  117. margin-right: $gutter/2
  118. line-height: 0
  119. +border-radius($radius)
  120. border: 6px solid lighten($bgColor, 10%)
  121. +transition(all .1s ease-out)
  122. &:hover
  123. border: 6px solid $linkColor
  124. .last-example-image-link-in-set
  125. margin-right: 0
  126. .example-image
  127. +border-radius(2px)
  128. /* -- Sharing -- */
  129. .sharing
  130. position: fixed
  131. top: 20px
  132. right: 0
  133. /* content
  134. *----------------------------------------------- */
  135. .download-section
  136. text-align: center
  137. .download-button
  138. display: block
  139. width: 300px
  140. margin: 0 auto $gutter/2 auto
  141. padding: $gutter/4
  142. background-color: darken($bgColor, 10%)
  143. border: 6px solid $bgColor
  144. +border-radius($radius)
  145. +transition(all .1s ease-out)
  146. +pie-clearfix
  147. &:hover
  148. border-color: $linkColor
  149. background-color: #444
  150. .file
  151. font-size: 36px
  152. color: white
  153. line-height: 1em
  154. .version
  155. font-size: 24px
  156. color: $linkColor
  157. .changelog
  158. margin-bottom: 0.5em
  159. li
  160. list-style: none
  161. padding: 0 0 0 14px
  162. background: url(../img/bullet.gif) no-repeat 0 11px
  163. color: #999
  164. .version
  165. color: #88A616
  166. .date
  167. color: #fff
  168. .old
  169. display: none
  170. .showOlderChanges
  171. color: #999
  172. .forums
  173. float: left
  174. margin: 0 $gutter $gutter 0
  175. padding: 10px
  176. background-color: #333
  177. border: 5px solid #333
  178. +border-radius($radius)
  179. +transition( all .1s ease-out)
  180. &:hover
  181. border-color: $linkColor
  182. background-color: #444
  183. .speech
  184. float: left
  185. margin-right: 20px
  186. .link
  187. float: left
  188. font-size: 36px
  189. font-weight: 400
  190. color: white
  191. line-height: 1.1em
  192. .sub
  193. color: $linkColor
  194. .donate-button
  195. border: 5px solid rgba(0, 0, 0, 0)
  196. +border-radius($radius)
  197. +transition(all .1s ease-out)
  198. &:hover
  199. background-color: #444
  200. border-color: $linkColor